Robert Modell wrote:
Why do I get a horizontal scrollbar with the following code:<body> <div style="padding-left: 20px; padding-right: 20px; width: 100%;">
Briefly, you're looking at at known IE quirk. In more detail, see section 4.1.2 of the CSS1 spec (http://www.w3.org/TR/REC-CSS1#horizontal-formatting): The horizontal position and size of a non-floating, block-level element is determined by seven properties: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' and 'margin-right'. thus implying that "width" does not include border, padding, or margin. Further, CSS2.1 (at http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width) explicitly says: This property specifies the content width of boxes generated by block-level and replaced elements. And at http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions the specification pretty clearly says that "content width" means "not including margin/border/padding". Furthermore, see <http://www.tantek.com/CSS/Examples/boxmodelhack.html>. This page was created by one of the members of the CSS working group, who also happens to be the technical lead of the Mac IE team. The page describes what the correct behavior is and further illustrates a hack to get IE5/Windows and IE5.5/Windows to do the right thing (basically, by giving them rules that actually set the wrong width). IE6, like Mozilla. MacIE, Opera, and Safari, has two rendering modes -- your page triggers the "BackCompat" mode in which its rendering is broken. In its "CSS1Compat" mode it will render your page just like Mozilla does. See http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/compatmode.asp for more information on that. -Boris _______________________________________________ mozilla-layout mailing list [email protected] http://mail.mozilla.org/listinfo/mozilla-layout
