18 January, 2006

width percentage issue

In a previous post
, I already pointed out the difference between IE and Firefox concerning the width property when set in pixel.
It appears to work the same way when this property is set in percentage.
Indeed, try setting the width of a bordered DIV to 100% of the BODY. For example, the DIV has a classic 1px black border. The body, depending of your screen resolution and the size of the IE (or Firefox) window, could be 950px large. On IE, you get a DIV which width is 950px (948 + 2 for the borders). That's what you expect, right ?
On Firefox, you get a DIV which width is 950px. But remember, on Firefox, the padding and border are not included, so you get a border-to-border width of 952px (950 + 2 for the borders) and a hugly horizontal scrollbar at the bottom of the page. Plus, you don't see the right border of your DIV ! That's not really what you expected !?
See my width percentage issue sample for the visual proof.