Differences between revisions 1 and 6 (spanning 5 versions)
⇤ ← Revision 1 as of 2007-11-15 15:58:35 →
Size: 223
Editor: dslb-084-058-254-116
Comment:
← Revision 6 as of 2007-11-15 16:28:06 → ⇥
Size: 871
Editor: dslb-084-058-254-116
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
Demo for the invalid interpretation of the CSS box model by internet explorer < 6 == Demo for the invalid interpretation of the CSS box model by internet explorer < 6 ==
Line 3: Line 3:
[http://search.mpi-sb.mpg.de/markus/examples/box-modell/test1.php] [http://search.mpi-sb.mpg.de/markus/examples/box-modell/test1.php Test 1]
Line 5: Line 5:
[http://search.mpi-sb.mpg.de/markus/examples/box-modell/test2.php] [http://search.mpi-sb.mpg.de/markus/examples/box-modell/test2.php Test 2 (quirks mode)]


== style.width versus offsetWidth ==

style.width is a read/write property of an element and is the width of the content area of the object.

offsetWidth is a read-only property and means the effective width of the element including padding of the element.

Example:
{{{
<div id="test1" style="300px;">width = 300px</div>
<div id="test2" style="width: 300px; padding: 10px;">width = 300px; padding = 10px</div>

var div1 = document.getElementById('test1');
var div2 = document.getElementById('test2');

div1.width: 300px
div2.width: 300px
div1.offsetWidth: 300px
div2.offsetWidth: 320px
}}}

Demo for the invalid interpretation of the CSS box model by internet explorer < 6

[http://search.mpi-sb.mpg.de/markus/examples/box-modell/test1.php Test 1]

[http://search.mpi-sb.mpg.de/markus/examples/box-modell/test2.php Test 2 (quirks mode)]

style.width versus offsetWidth

style.width is a read/write property of an element and is the width of the content area of the object.

offsetWidth is a read-only property and means the effective width of the element including padding of the element.

Example: 

<div id="test1" style="300px;">width = 300px</div>
<div id="test2" style="width: 300px; padding: 10px;">width = 300px; padding = 10px</div>

var div1 = document.getElementById('test1');
var div2 = document.getElementById('test2');

div1.width: 300px
div2.width: 300px
div1.offsetWidth: 300px
div2.offsetWidth: 320px

CompleteSearch: completesearch/CSSBoxModel (last edited 2007-11-15 16:29:28 by dslb-084-058-254-116)