Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

absolutely positioned span disapears in IE 5.5 & 6

Status
Not open for further replies.

bpw89

Programmer
Dec 17, 2006
11
US
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):
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.
 
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
[/tt]
 
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:
___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Hallelujah! Thank you Vragabond. It worked, and I'm glad I avoided javascript.

Bryon W - --
Visit my latest website: AwfulDeals.com.
Sign up for the Awful Newsletter.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top