Some CSS Help for IE

[noel_x99]

I have a hover menu started - when you hover over the words, the text changes from black to gold and a new image is displayed next to the text. (On this temp version, I used the same pic for all images, but added a text layer to show the difference.)

In IE, it only works if I have a background color on the hover link. If I remove the background color then the hover images no longer work (although the color change on the text is fine).

Here is the menu
With Background color on hover: BACKGROUND COLOR

Without background color on hover: NO BACKGROUND COLOR

In FF, it's fine. In IE, the text color changes on hover, but the images do not change.

This is the only difference in the two pages:

#menu a.p1:hover, #menu a.p2:hover, #menu a.p3:hover, #menu a.p4:hover, #menu a.p5:hover, #menu a.p6:hover {background-color:#fff; text-decoration:none; color:#FED200; }

#menu a.p1:hover, #menu a.p2:hover, #menu a.p3:hover, #menu a.p4:hover, #menu a.p5:hover, #menu a.p6:hover {text-decoration:none; color:#FED200; }

Do I need an IE Hack? Do I have something wrong in my syntax? Any ideas are appreciated.

Thanks!

[le_gber]

which version of IE are you testing in? I got the same - a working version - in FF1.5 and IE7

[noel_x99]

I forgot to check IE 7. I was in IE6.

[drummin]

Hello,
I had thought that maybe it was the class name "p" that was causing the problem. Changed all to "m" and still had same problem so I'm not sure why this happening.
I changed background color to #ff0000 and page looked great. If you can't resolve issue, maybe just use background color that matches menu background.

[speed]

#menu a.p1:hover, #menu a.p2:hover, #menu a.p3:hover, #menu a.p4:hover, #menu a.p5:hover, #menu a.p6:hover {height: 1%; text-decoration:none; color:#FED200; }

The height: 1% negates the need for the background colour, it seems to work in IE6, IE7 and Firefox now.

[drummin]

Once again, Speed has the answer!

[noel_x99]

Thanks Speed! That's an answer. I don't understand why it works, but it does.

Drummin, if I didn't find a way around, I had planned on coloring the background to match, but the design called for the background to be a gradient, so I was hoping for a solution.

Thanks to both of you for your efforts.

[speed]

The other fix that can sometimes work is position: relative, basically all the fixes do is trigger IE to recalculate dimensions or coordinates but calculate them correctly ... ish.

If you're not already, you do need to test in IE6 and IE7 because I've seen layouts explode in 7 that work fine in 6, usually it is because of a bad hack or some fudge to make 6 behave.

[noel_x99]

Thanks. I think I understand it. I just wouldn't have known where to look for an answer like that.

I do test in 7, but I have it on my laptop and I check there, but don't work there.

I almost always do my design work in FF with the IEtab. Once I'm reasonably satisfied, then I go to IE and look. Then eventually to 7. I've been fortunate that I haven't had any issues with 7.

I want to give up on IE 6 on my development computer but statistic are still showing a huge number of IE6 (and even IE5!) users still coming to our sites.

I appreciate your help!