Wickham's HTML & CSS tutorial
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems warning: works in some situations or some browsers or needs care to display as you wish OK in Firefox, Safari, Opera, Google Chrome and IE
1 This shows how IE6 to IE9 are different from Firefox when a Doctype is not used (quirks mode). The padding and borders are calculated inside the box in IE6 to IE9 but outside with IE10, Firefox and most other browsers. 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 IE6 to IE9.
Gray padding 20px to all sides above.
Dark gray border 20px to all sides below.
Note that the overall width of the div boxes is the same as the image in IE6 to IE9 as the padding or borders squeeze the text area narrower; the width has the padding or borders additional to the basic div width in IE10, Firefox and most other browsers. The height is also affected the same way, but additional text would automatically increase the div height in both IE and Firefox.
All IE versions will display padding and borders outside the box sizes 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 IE6 to IE9 but are correct in IE10 and Firefox - so use a Doctype.
The page will not validate if there is no Doctype.
© Wickham 2006 updated 2013