IE Anomaly with 12.5% float left divs

[Thierry]

Currently I'm working on building a menu at the top of the page.

Each item is 12.5% (1/8) in width, with a float:left to keep them nicely aligned next to each other.

Another div inside it gives it a border per item, but this doesn't extend the width.

 

In FF and Chrome it works fine, but in IE there's an anomaly when I use overflow:auto on the page itself.

Seeing as how FF and Chrome don't show the scrollbar unless it is needed, I want the same for IE.

 

However, when I set overflow:auto on the body/HTML, IE throws the last DIV underneath the other ones, as if the page suddenly lost a few pixels of width.

 

I also noted the menu items don't fill the entire width of the page in IE when maximized, there are a few pixels at the right edge that aren't being filled, but I can't increase the width of the items without getting the same issue.

 

I'm thinking it's some weird IE rounding error and that it can't correctly calculate the widths needed.

 

Examples below, first how it is done right by Chrome (and FF)

In Chrome

 

And how it is done by IE, first without overflow: auto;

IE no overflow

 

And in IE with overflow: auto;

IE with overflow

 

The menu itself as said is very simple.

8 divs with 'width:12.5%; float:left;' and a div inside it that gives it a white border on the right side.

Only the last div doesn't have that border, but none of the borders extend the width in any way.

 

If there's a fix for this without having to resort to using position absolute and creating 8 separate classes with the right positions, I'd love to hear it. 

[haku]

IE doesn't really seem to work well with decimal values. I've had troubles with this in the past.