Examples: box model frustrations

The box model is a subject of much frustration. If only it was implemented correctly!

Simple, isn't it? Well, no, not in practice. Let's do a little test. If you take this source:

  <style>
   div {padding:3px 0}
   div button, div select, div input, div textarea,
   div address, div div, div img, div object, div hr {
    width:120px; height:24px;
    margin:0px 10px; padding:0 10px;
    border-width:0 10px; border-style:solid; border-color:#7F7755;
    color: #804000; background-color:#FFFFFF;
    font:16px/20px sans-serif;
   }
  </style>
   .
   .
  <div><button>button</button></div>
  <div><select><option value="select">select</option></select></div>
  <div><input value="input"></div>
  <div><textarea rows="1" cols="8">textarea</textarea></div>
  <div><address>address</address></div>
  <div><div>div</div></div>
  <div><img src="img.png" alt="img"></div>
  <div><object data="object.html" type="text/html">object</object></div>
  <div><hr style="height:3px"></div>
  

All of these elements are supposed to have the same width: 160 pixels. However, if you're viewing this in quirks mode, only the last four are that wide in most browsers; the others are only 120 pixels wide. With IE, it's even worse: the address and the div are 120 pixels wide, and the img and the object measure 140 pixels.

address
div
img
object

Switching to standards mode helps, but not as much as you think: the bottom six now have the correct width (even on IE, where the img and the object are also OK), but the button and the select still measure 120 pixels!

So the sad conclusion is that in this case, only Amaya has it right. Let's all switch to Amaya in protest!

This document is currently being displayed in quirks mode. Click here to display in standards mode.