Blog image: 

For the longest time I had been battling css menus with floating LIs. If the LI has within it normal text, instead of an image, each browser will indefinitely display the LI's with different widths because each font will be displayed differently. I either ended up usually giving fixed widths to each of the LIs, (which sort of defeated the purpose), or ended up with the entire menu being short of a few pixels in certain browsers.

The main problem with this is if you have a rollover, or an active state for the selected item, you will definitely see that extra space and it will look bad.

So I found a trick to set the outer div of the menu to 'overflow:hidden'.

Then set the inner ul to a width purposely bigger then the outer div.

Then when the LI inside floats it will not wrap, it will expand and the end of it will be cut off. In browsers where the spacing is too big, you will just not see the extra room. In browsers where the spacing is less, you will have it fit better.

Old Greenwich, CT 06870 - (914) 275 5520