Re: IE6 background-position issue

[AshtonSanders]

The problem is that When you float a <li> in IE6, sometimes* it doesn’t shrink the width of the <li> to be as thin as possible (allowing the other buttons to align next to it); it remains at 100%. When this happens the only real fix I have been able to find is to manually program the width of each button =/

Do me a favor, and try "float: right" and let me know how that goes.
Also try adding "display:block" to the "li" (repetitive I know).

*I have run into the problem before (with teakwarehouse.com’s menu) and had to manually edit the widths of each menu item. But I just did my personal website’s menu that way and didn’t seem to have any problems… I can’t see any major difference in the codes, besides the two I mentioned above and the position absolute for the UL. Here’s my code:

Code:

ul#navbar {
position: absolute;
right:0;
bottom:0;
margin:0;
padding:0 2px 0 0;
background: url(‘../images/layout/nav-divider.jpg’) bottom right no-repeat;
}

ul#navbar li {
display:block;
float:right;
padding-left:2px;
background: url(‘../images/layout/nav-divider.jpg’) bottom left no-repeat;
}

ul#navbar li a {
display:block;
padding:23px 23px;
text-decoration:none;
font-size: 20px;
color: #024558;
background: url(‘../images/layout/nav-hover.jpg’) repeat-x;
background-position: 0 -80px;
}

I hope that helps…
Ashton Sanders