CSS menu - background image change on hover

broken in IE(Win) - client getting uppity

[dcrombie]

Using the CSS and HTML below the labels from one button jump on top of other buttons as you mouseover. I'm not kidding! Affects IE5.5(Win) and IE6.0(Win) which I don't have access to for testing. I've tried everything I can think of and wasted hours searching...

(both images are 154x30px)

#menu { 
 margin: 0; 
 padding: 0; 
 list-style-type: none; 
}

#menu LI { 
 margin: 6px 3px; 
}

#menu A { 
 display: block; 
 padding: 4px 0; 
 width: 154px; 
 height: 16px; 
 background-image: url(images/button.gif); 
 background-repeat: no-repeat; 
 text-decoration: none; 
 text-align: center; 
 font-size: 14px; 
 color: #fff; 
}

#menu A:hover { 
 background-image: url(images/button_over.gif); 
 background-repeat: no-repeat; 
}

<UL id="menu"> 
 <li><A href="/index.html">Home</A></li> 
 <li><A href="/products.html">Products</A></li> 
 <li><A href="/contactus.html">Contact Us</A></li> 
</UL>

[createErrorMsg]

This is just a guess, but could it be because you used only one ID (in the UL tag)? Since the styles are cascading through that tag to each LI element, maybe the browser is getting confused about which LI tag gets the new image. Maybe if you gave each LI it's own ID attribute it would work?

[Aberdeen]

when you say it is broken, do you mean it flickers?

If that is the case it is a IE6 (and not IE5.5) cache problem to do with background images. I think the answer is to asign the <li> the background from a:hover.

Hope this helps.

[dcrombie]

I don't think it's the ID tag - the code works in every other browser I've tested in.

And it's not a flicker - that would be no problem as there are a number of fixes for that including setting the LI background permanently to the 'off' state behind the A which switched from 'off' to 'on'.

The problem is that while moving the mouse over the menu the actual link text is duplicated and dumped on top of other links making everything illegible.

ie. the word 'Products' is piled on top of the words 'Contact Us', etc. I've seen screenshots of this and it's not pretty :(

HELP!

(I can sticky the URL if anyone's interested...)

[Rambo Tribble]

Go ahead and sticky me.

[Rambo Tribble]

I cannot reproduce the specified behaviour using IE 6 on Win XP. I do, however, think your problem does relate to having the :hover pseudo-class applied through an ID, an ID which actually applies to all the anchor tags simultaneously. I would suggest splitting the hover attribute out into a class and applying that class to each, individual li.

[dcrombie]

I've now had two people looking at the site who say they can't re-produce the problem. It's possible that some changes I made to the CSS earlier in the week have fixed things and the client is seeing a cached version but that hasn't been a problem with this client before.

I was hoping to find someone who'd experienced this on another site - it's definately a bug and I've had people on two continents verify reporting it - one using IE5.5 and the other using IE6.0.

Thanks for those who've had a look. If anything else comes to light I'll post it here.

[edit]I'm fairly certain it's not a problem with the CSS selectors as suggested above[/edit]

[Rambo Tribble]

Despite your certainty, the behaviour you describe is notably similar to that which is observed when two elements are given the same ID. Try it and you will see what I mean.

[dcrombie]

I can't try it because I don't have a Windows machine to try it on.

I take your point however, that IE(Win) might behave that way, but that makes it even buggier than I thought it was.

How could the background-image of a container changing have any effect at all on the text inside it?!? And we're going to be stuck with this POS as the default browser for the next year or more?!?

[createErrorMsg]

The change in the background image is causing the browser to rework the page. If during that rework it runs across multiple elements with the same ID, it's not too surprising that it might become confused about where the material in those elements goes.

I'm with RamboTribble on this one, reassign the A attributes to a class and apply the class to all LI tags.

Incidentally, the machine I'm on now has IE 5(win95). If you sticky me the URL I'd be happy to see if the problem replicates for me.

[dcrombie]

I don't accept that assigning an ID to the UL means that there are multiple items with the same ID. This is the way CSS is supposed to work.

<UL id="menu">  
 <li><A href="/index.html">Home</A></li>  
 <li><A href="/products.html">Products</A></li>  
 <li><A href="/contactus.html">Contact Us</A></li>  
</UL>

But, it's starting to look like IE might be assigning it's own pseudo-id to each of the LI's and/or A's and losing track of which is which during the :hover event.

Still haven't found any reference to this particular problem on the WWW...

[TheWhippinpost]

Just a guess (without testin), try assignin position: relative to either/all of the ul, li or a elements.

Also, ya haven't got an a:visited in there too have you? If so, make sure it's in the right order.

[createErrorMsg]

I checked out the site and it works fine for me on IE 5.0 for Windows. No glitches or jumping text.