Link shows but doesn't actually link inside a positioned div in IE

Question

you can see the site at Emeraldcityguitars.com, the links are the Spotlight titles in New and Vintage Spotlight spaces at the bottom. the images link but the product title text doesn't.

I think the issue is that its contained in a z-indexed div, but I don't see why that would break a link.

Help...

 <div id="vintage_spotlight">
    <% if @vintage_spotlight.blank? %>

    <% else %>
    <div id="vintage_image">
        <%= link_to (image_tag @vintage_spotlight.front_photo.data.url(:spotlight)), @vintage_spotlight %>
        <div id="vintage_image_title"><%= link_to @vintage_spotlight.title, @vintage_spotlight, :class => 'spotlight_link' %></div>
    <% end %>
</div>

And the CSS...

#vintage_spotlight{
float:right;
background-image:url(/images/vintage_spotlight_bg.png);
background-repeat:no-repeat;
height:265px;
width:257px;
margin-right:34px;}

#vintage_spotlight a{color:#fff;}

#vintage_image{
padding:40px 0 0 8px;
position:relative;}

#vintage_image_title{
position:absolute; 
bottom:0px; 
right:10px;
height:26px;
width:160px;
padding:10px 0 0 3px;
background-image:url(/images/spotlight_overlay.png);
background-repeat:no-repeat;
color:#fff;
font-size:12px;
z-index:100; }

.spotlight_link{
position:relative;
z-index:200;}

any thoughts?

Answer 1

Not really an answer, but since nobody else answered...

When I load this page in IE8 (its all I have) the links work at first and then the text changes (literally, the font changes) and the links deactivate.

So in my opinion something is interfering with your CSS. Maybe it is the JS or another element overlapping and causing issues. I would suggest the following troubleshooting steps. Use a new page on your dev environment.

1. Work with only that link, its container and the JS/CSS associated with those two elements. Narrow down what you are working with.
2. Pay attention to position, z-index and floats. Try to remove those if possible as they are the only suspicions I currently have.
3. If you confirm CSS is not the problem then your issue is probably JS interference. I would suggest posting another question to address that.

Answer 2

As I can see, the link inside:

<div id="vintage_image">

that wrapped the image gets a height 0 once rendered.

Please check if there is any javascript that modifies the links style.