Forum Moderators: not2easy
The solution was to give the body a margin of 0px.
Is this the correct way of getting around this problem?
Thanks
The margin on the body element can be (i think) whatever the browser vendor wants it to be. You, as a concientious and superbly aware designer may change that with CSS.
Elements should not normally encroach into that 'margined' area.
hehe, glad it worked out!
Nick
If you put something inside it to fill it 100%, it will never expand to the outer wall of the box, right? The wall thickness is important. The thicker the box, the less room inside it.
It's the same way with CSS. The only difference is that in CSS you can set the "wall thickness" (=padding) to zero, which will allow a nested element to take up just as much space as its parent.
<added>
And, technically you would want to change the padding for the body element. Padding is the space between the box border and contents. Margin is the space between the box border and surrounding elements.
We've been slightly deceived in the past by using attributes such as leftmargin, topmargin, etc. They never affected the body margin. Instead, they affected the inner padding.
Modern browsers seem to be forgiving. Specifying both zero padding and zero margin is probably the safest solution, though.
</added>
I was assuming that I was encountering IE box model problems but I guess I wasnt, as Nick pointed out.
So, what did you have in Mozilla? <confused>
In Mozilla the menu bar filled ALL of the browser window, doing exactly what I thought 100% width should do. However this was not the case in IE.
<style type="text/css">
#bar{position:absolute; top:0; left:0; width:100%; height:25px; background-color:#000000;}
</style>
<body>
<div id="bar"> </div>
</body>