It’s an unfortunate fact that Internet Explorer 6 will always incorrectly expand any dimensional restricted block element so that oversize content is unable to overflow, as the specs require that content to do. IE7 has fixed this issue and does not wrongly expand boxes such boxes, instead allowing the overflow property to operate as intended by the W3C.
[css]
div {
background: #fff;
border: 6px solid #ccc;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}
[/css]
I will be comparing IE6’s way with the correct behavior as seen in Firefox. The W3C says a rigidly sized block box should allow oversize content to protrude or overflow beyond the edges of the sized box.
There is no real “fix” for IE6’s incorrect behavior, except to work around or avoid it. Several possible workarounds will be detailed as I discuss the issue.
If you want to read more about this issue then Click Here ….
Resources & Links
- CSS Length Values via Mozilla Developer Network
- HTML Borders via Quackit.com
- The CSS Box Model via CSS-Tricks
- CSS Float Theory via Smashing Magazine
- CSS Positioning 101 via A List Apart
- Resources for Grid-Based Design via Vandelay Design