According to this wikipedia article...
http://en.wikipedia.org/wiki/Internet_E ... _model_bug
...IE6 and later browsers do not exhibit the box model bug if I use XHTML Strict or XHTML Transitional with a proper declaration for that, correct? Plus, the page must validate, I would imagine, in order to not generate rendering errors against its doc type.
And, it says that prior to IE6, there is no way to stop the bug, correct?
///
In the end, this is interesting because I had not read up enough on the box model -- I just sort of knew it by other means. I knew in FF when I apply settings on a DIV (as a box), that the margin property falls outside it, the border falls outside it, and the padding falls inside it. However, that said, the interesting thing is that the width is affected by the padding as a subtractor. So, if I have a box that I want to be 50 pixels wide, in W3C compliant box model mode, a given browser should compute width by the content inside the padding number, inside the border, and inside the margin. So, if I have a 10px padding in the box, then its width just increased by 20px, although its border is now 10px away on any given side. (Hopefully someone can correct me here if I'm wrong.)
Box Model and IE
Moderator: General Moderators
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: Box Model and IE
To make it really simple, don't use padding on block-level elements!
To emulate padding use margin on the first child element inside of the block-level element you want to give padding to.
So visually....
Do not...
Do...
This was actually a question asked of me at a recent job interview.
In another example you can download Opera 4 (not joking, look up "old versions" on a search engine) (and this will also work on IE 4.0) and use the following code. These two browsers have a solid implementation of CSS 1.0 so if you know CSS 1.0 pretty well you can do some (although simple) exceptionally standards compliant code.
...and when you add a child...
...add your margins as so and you'll effectively emulate padding on the parent...while still having this work in browsers no sane person would touch...which suggests a few things about myself.
To emulate padding use margin on the first child element inside of the block-level element you want to give padding to.
So visually....
Do not...
Code: Select all
<div style="padding: 50px;"><div>stuff</div></div>Code: Select all
<div><div style="margin: 50px;">stuff</div></div>In another example you can download Opera 4 (not joking, look up "old versions" on a search engine) (and this will also work on IE 4.0) and use the following code. These two browsers have a solid implementation of CSS 1.0 so if you know CSS 1.0 pretty well you can do some (although simple) exceptionally standards compliant code.
Code: Select all
<body> <div id="content" style="background-color: #ff0; float: left; width: 80%">content</div><div id="side" style="background-color: #0ff; float: left; width: 20%">side</div></body>Code: Select all
<body> <div id="content" style="background-color: #ff0; float: left; width: 80%"><div style="background-color: #f0f; margin: 50px;">content child</div></div><!-- /#content --> <div id="side" style="background-color: #0ff; float: left; width: 20%"><div style="background-color: #0ff; margin: 50px;">side child</div></div><!-- /#side --></body>...add your margins as so and you'll effectively emulate padding on the parent...while still having this work in browsers no sane person would touch...which suggests a few things about myself.