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.

1 comment:

Donal said...


I am having a similar problem with height of a banner. I hope you don't mind if I post the file below.

Basically the banner is fine when it is viewed in Firefox but when I go to IE, the banner and the content pages seem to be separated. Plus, on IE, the banner doesn't go to the top of the page, like it does in Firefox. javascript:void((function()%20{if(self.cocomment_toggle)%20cocomment_toggle();%20else%20{var%20element=document.createElement('script');%20element.setAttribute('src','http://www.cocomment.com/js/cocomment.js');%20document.body.appendChild(element)}})())

Any help on this would be great, I'm relatively new to CSS.

Hmm, it won't let me post with the html here. Would you mind leaving a comment on my blog if you don't mind me emailing you the files?