Sprite menus are messed up in IE7

HTML & CSS
1

I was showing someone my sites online and they have IE7. I noticed that my Sprite menus were all messed up. They work fine in IE8, Firefox, etc. What could have happened and how to do I fix it? The sites are www.foxdenwebsolutions.com and www.foxdencreations.com.

2

Hi,
You have the IE6/7 Staircase Bug.

It is triggered when the LI is left in the default state (display:list-item) and the anchor is floated.

Just add this new rule for the LI and float it.


ul#menu {
    list-style: none;
    margin: 0 auto;
    width:1024px;
    height: 39px;
}
[B]ul#menu li [/B][COLOR=Blue]{float:left;}[/COLOR]

ul#menu li a {
    float: left;
    height: 39px;
    text-indent: -9999px;
}
3

Thank you Rayzur. I appreciate your help on this one. I found a program where I can run IE5 through 9 beta and in 5 and 6 it looks awful…the graphics are all messed up. Guess I will just have to live with it because I know that IE6 does not like pngs.