absolutely positioned span disapears in IE 5.5 & 6

[bpw89]

Hey, I'm hoping for some CSS help:

Whenever someone hovers over a link in a menu, I want a section below to appear with more information. I am using a SPAN inside the link. Normally, it is set display:none; then when on hover, it changes to display:block; and absolute positioning. This works in FF, IE5, and IE7. But in IE5.5 and IE6, the SPAN doesn't appear at all.

Here is my prototype (view in FF, IE5 or IE7 to see the effect I'm trying to create. View in IE5.5 or IE6 to see the bug):

http://awfuldeals.com/prototype/.

The simplified xhtml and css:

<div class="menu">
<div class="wrapper">
<ul>
<li><a class="nav" href="#">Deals<span>HI THERE</span></a></li>
<li><a class="nav" href="#">Products<span>WASSUP</span></a></li>
<li><a class="nav" href="#">About Us<span>COOL</span></a></li>
<li><a class="nav" href="#">Newsletter<span>YA YA</span></a></li>
</ul>
</div>
</div>

.wrapper {
position: relative;
}

a.nav span, a.nav:link span, a.nav:visited span {
display: none;
}

a.nav:hover span, a.nav:active span {
display: block;
position: absolute;
width:500px;
height:120px;
top: 70px;
left: 220px;
}

My idea is that its not working because I'm trying to absolutely position the span outside of its container. I've tried overflow: visible; to no avail.

Thanks in advance for any ideas.

 

[BillyRayPreachersSon]

It's because IE 6 and below don't have much support for the hover pseudo-class on anything other than anchors, or affecting anything other than anchors (the latter in your case).

You'd need to use a small amount of JS to add / remove a class from those elements on mouse over / out and use than as well as the hover pseudo-class.

Note - I say "as well as", instead of "instead of", as that way, people with no JS enabled but with a supporting browser will still be able to see your menus.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

Actually, this can be made to work in IE6. There is a strange bug in IE6 (but then again, everything is strange in that browser) that makes it not show the span if certain styles are/are not applied. See here for more details on the bug and how to get around it:

http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[bpw89]

Hallelujah! Thank you Vragabond. It worked, and I'm glad I avoided javascript.

Bryon W -

http://www.wcctechhelp.com

--
Visit my latest website: AwfulDeals.com.
Sign up for the Awful Newsletter.

 

[monksnake]

oh come on, javascript ain't so bad.

<.

 

[bpw89]

http://www.w3schools.com/browsers/browsers_stats.asp

Why make your site inaccessible to 6% of users when you don't have to?

Bryon W -

http://www.wcctechhelp.com

--
Visit my latest website: AwfulDeals.com.
Sign up for the Awful Newsletter.