Wickham's XHTML & CSS tutorial

Padding and borders without a Doctype

View in Firefox and IE to see the differences. IE6 and IE7 are the same, both different from Firefox.

red icon problems gold icon warning: works in some situations or needs care to display as you wish green icon OK in Firefox, IE6 and IE7

1 red icon This shows how IE is different from Firefox when a Doctype is not used. The padding and borders are calculated inside the box in IE but outside with Firefox. The image is 200px wide and the divs are width: 200px so that they display the same width with padding and/or borders contained inside the div in IE.

This div has the same size as the image below: 200 x 50 px with padding: 20px;

horses

This div has the same size as the image above: 200 x 50 px with borders: 20px;

Note that the width of the div boxes is the same as the image in IE as the padding or borders squeeze the text narrower but the height is not the same; the height has the padding or borders additional to the div height in IE and FF.

IE will display padding and borders outside the box width if a Doctype is used and this is recommended.

You should also note how some stylesheet styles are working but some are not; the page, divs and image are not centralising and the general font is not small as specified in the stylesheet without a Doctype in IE but are correct in Firefox - so use a Doctype.

The page will not validate if there is no Doctype.