:hover not functioning in IE7

HTML & CSS
1

Hi there

I have an overlay feature on the homepage of my website, if you hover over the image the overlay appears and some text is shown.

I have achieved this by using the following HTML

<div id=“box”>
<div class=“teaser”>
<img src=“backgroundImage”>
</div>

  &lt;div class="content"&gt;
     Overlay content here
   &lt;/div&gt;

</div>

and

CSS

.content{
bottom:0;
display:none;
position:absolute;
z-index:10;
}

#box:hover .content{
display:block;
}

This is functioning in all browsers apart from IE7, and unsure why

Anyone got any clues?

Thanks

2

Do you have a doctype? First thing I always want to know.

Also, you’re absolutely positioning .content, but I didn’t see the part of the code where you stated that #box was its nearest positioned ancestor. Do you have position: relative on #box?

3

Yes the doctype is

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

And yes the box has relative assigned to it

Thanks

4

Duh, excuse me for being stupid: I missed the big blue underlined link to the page in question! Lemme take a look…
sorry : )

*edit

Not having IE7 right now (wrong machine), I still looked and while it may be something stupid we’re both overlooking that seems unrelated, two ideas come to mind:
The rel-po’d box4 isn’t a direct ancestor, and I have seen IE get confused with actual positions when a grandparent is the nearest positioned ancestor and a grandchild is abso-po’d. Also I see the parent itself is also abso-po’d. So #box4 isn’t the one setting the positioning. There is a nearer ancestor.

You should be able to do a simpler test case on your page for the lawlz and to see if IE7 works in the simple case (it should).

Take #box4 and keep it position: relative. Make a direct child, some new box. Make it position: absolute and margin-left: -999em;
then add :hover to make margin-left: 0;

<div id=“#box4” …>
<div class=“foo”>
foo</div>
</div>
#box4 {
position: relative;
}
#box4 .foo {
position: absolute;
margin-left: -999em;
}
#box4:hover .foo {
margin-left: 0;
}

Also, you have bottom: 0 and if this were my site, for the lawlz I’d see if I could see anything in IE7 without the coordinate. Or with left: 0 and top: 0. Sometimes a :hover is working but you don’t see it because the thingie doesn’t appear where it should.

ot:
I was surprised to see a url as a class working, since I was sure : were illegal in CSS class names.

5

Thanks, the html on the live site is a bit different to what I have shown you in this post, but the principle is the same

6

Hi, it could be a sticky bug :). Try this


#box:hover{visibility:visible;}
7

RyanReese, thanks that has worked.

Thanks very much for your response stomme, will try that test out and let you know if it works as well…

Oh yeah, you are right about the url as a class, i had never thought of that, im only doing that to use Jquery to select elements based on what page im on, im not actually using the class for CSS. Prob a better way of doing it, but its working for now.

Thanks