I have a header node in which four child nodes reside. None have borders, padding nor margins. All four of them have the width:25%; css rule. In Opera it works just fine, in IE the last block flips to the next line sometimes depending on the width of the window.
I can solve it by giving one block a width of 24.8%, but Opera interprets that as 24% and thus leaves a wide open gap of 1% at the end of the blocks.
How can I solve this? It would be ok for the last block to miss a pixel on the right.
You might want to just load a different stylesheet depending on the browser. You can do this with some JavaScript in the header.
It depends on the rounding algorithm in use. If you have a number of pixels evenly divisible by 4, then you won't have an issue because there's no rounding issue. If you don't have that then sometimes you're going to end up with too many pixels because the widths are being rounded up.
total width: 800 25% width: 200 four 25% blocks: 800
total width: 799 25% width: 199.75 four side-by-side blocks: either 796 or 800
800 width against a 799 width window is going to drop down.
http://ejohn.org/blog/sub-pixel-problems-in-css/
This is a well-known issue in the CSS world, unfortunately. Likely the issue is that the 100% pixel-equivalent these fit into is an odd number, so there is a rounding error when calculating pixels.
Usually I solve this by using an IE-specific selector for . Rob suggests browser-specific stylesheets, but I always found that behavior hard to maintain, and it requires an additional HTTP load from a browser. I do also hate CSS hacks, but you can try the famous #width:24.9% after declaring the proper width (e.g. width:25%; #width:24.9%; ). Hopefully if IE fixes this hack in future versions, it's also along with the rounding issue.
Also, if you know the pixel width of the parent element, you could just make sure it's evenly divisible by 4. But if this is a fluid layout, that's not an option.