horizontal menu (ul/li) with percentages

[cdmn]

Hi.

Lets say we have DIV (width: 999px) and that DIV holds ul
and ul has 7 li's. Each of li's has theres own width of percentages, like so: 14% 15% 15% 14% 14% 14% 14%.

And there goes an issue, IE calculates third li as 150px and firefox as 149px. (printscreened and checked). So firefox shoes everything right and IE breaks last li to next line...

Are there any solutions to this problem?...

[Setek]

Sounds like a pixel-rounding problem to me - not all that much you can do if I remember rightly - barring having an IE conditional comment to say "make this li 14% instead of 15%" and see whether it has enough space :)

Let us know how it goes

[cdmn]

I thought so....

I know this will work with talbe (1 row, 7 cells).
So i tried making ul act as table, display: inline-table, didnt worked..
Googled a bit - no answer, so just did this part with table-based :-)

Thanks for trying to help ;-)

[SuzyUK]

just a note to say there is a solution but where to put it is usually where it fits best for your layout

You can use a -1px left/right margin somewhere as most rounding differences are usually only 1px

in this case I might put put a -1px left margin on the first li, you can also put a -1px right margin on the last li, but in some cases that might cause a horizontal scroll so the first choice might be the best

You can add the negative margin to either side of any of the li's for it to work - if you think a 1px difference at the end of your menu is not noticeable or if you've already got an 'active' class on the li's you could add it to it that would save setting up a new class.

[cdmn]

OMG, so simple and so obvious!

Thank you once again :-)