Transitional quirks

To show that Transitional mode is not just about allowing older elements and attributes in the DOM, here is a list of differences in display between Transitional and Strict modes. I hope to show that Transitional mode is a bit like Quirks mode, maybe not as bad, but certainly as unpredictable!

Line height with smaller font sizes

Given this HTML:

  <font size=1>This is font size=1<br>This is font size=1</font>

In transitional mode, the line height is much smaller than in strict mode.

This is font size=1
This is font size=1

Quotation marks around quotes

Given this HTML:

  <q>This is a quote</q>

In quirks mode, IE doesn't display quotation marks, while most other browsers do.

In standards mode, there are no differences and all browsers display quotation marks.

This is a quote

Handling of empty table cells

Given this HTML:

  <table border="1">
   <tr><td>one</td><td>two</td></tr>
   <tr><td>three</td><td bgcolor="yellow"></td></tr>
  </table>

In quirks mode, Safari and Chrome draw a border around the empty cell (four), while most other browsers don't.

In standards mode, there are no differences and all browsers draw the border around the empty cell.

onetwo
three

Alt without title

Given this HTML:

  <img src="pic.png" alt="A picture">

In quirks mode, IE uses the alt text for a title (it displays the alt text as a tooltip), while most other browsers don't.

In standards mode, there are no differences and no browsers show a tooltip. (Note: only for IE8 and IE9. IE7 and below always show the tooltip, regardless of mode.)

A picture

Blocks that normally have margins, in table cells

Given this HTML:

  <table border="1" cellpadding="0" cellspacing="0">
   <tr><td><h4>h4 in table cell</h4></td></tr>
   <tr><td><dl><dt>dl in table cell</dt></dl></td></tr>
   <tr><td><ul><li>ul in table cell</li></ul></td></tr>
   <tr><td><form action="#"><div>form in table cell</div></form></td></tr>
   <tr><td><blockquote><div>blockquote in table cell</div></blockquote></td></tr>
  </table>

In quirks mode, Opera collapses all margins. IE10 or up in the default (non-IE5) quirks mode also collapses all margins. Most other browsers (including IE9 and below) collapse only the top margins.

In standards mode, no collapsing takes place and all browsers show all margins normally. (Note: form doesn't have margins in standards mode, but it does have a bottom margin in quirks.)

h4 in table cell

dl in table cell
  • ul in table cell
form in table cell
blockquote in table cell

Variant: blocks in containers with explicit height

Given this HTML:

  <div style="border:1px solid; height:3em">
   <p>p in div</p>
  </div>

In quirks mode, IE9 and below (or IE10 in "IE5 Quirks mode") collapse the p's top margin, while all other browsers (including IE10 in ordinary Quirks mode) display the margins normally.

In standards mode, no collapsing takes place.

p in div

Floating tables

Given this HTML:

  <table align="left"><tr><td nowrap>Floating tables do not wrap</td></tr></table>
  <table align="left"><tr><td nowrap>around to the next line, but</td></tr></table>
  <table align="left"><tr><td nowrap>overflow out of the window,</td></tr></table>
  <table align="left"><tr><td nowrap>if shown in quirks mode.</td></tr></table>

In quirks mode, these four tables are always displayed on the same line (side by side) by Firefox, Konqueror and IE, while most other browsers display them underneath each other if the window isn't wide enough.

In standards mode, all browsers display them underneath each other if the window isn't wide enough.

Floating tables do not wrap
around to the next line, but
overflow out of the window,
if shown in quirks mode.

Border width keywords

Given this HTML:

  <img src="pic.png" alt="" style="border:thin solid">

In quirks mode, IE draws a 2 pixel border around the image, while most other browsers draw a 1 pixel border.

In standards mode, all browsers draw a 1 pixel border.

Case sensitive class names

Given this HTML:

  <style type="text/css">
  .classname {color:red}
  .className {color:green}
  </style>
   .
   .
  <div class="classname">text</div>

All modern browsers ignore the case of the class name in quirks mode and make the text green. However, there have been browsers in the past that did not ignore the case of the name, like Netscape 6; so the text came out red.

In standards mode, the class name is always case sensitive and the text is always red.

text

:hover on non-anchor elements

Given this HTML:

  <style type="text/css">
  .hovered:hover {border:1px solid;}
  </style>
   .
   .
  <span class="hovered">span</span>
  <a class="hovered">anchor</a>
  <a class="hovered" href="#">anchor</a>

In quirks mode, IE and older versions of Firefox apply the hover style only to the last a, while most other browsers apply the hover style to all three elements. Note: IE10 in "ordinary" Quirks mode applies the style to both a elements, but not the span.

In standards mode, there are no differences and all browsers apply the hover style to all three elements.

span anchor anchor

Inherited font variant in table

Given this HTML:

  <div style="font-variant:small-caps">
   <table><tr><td>text in table</td></tr></table>
  </div>

In quirks mode, only Opera uses the div's font variant in the table; most other browsers ignore the font styling.

In standards mode, there are no differences and all browsers inherit the font style from the div.

text in table

Various IE-only quirks

A great number of IE-only quirks are caused by the fact that IE's quirks mode uses an older rendering engine, that simply doesn't recognise the "newer" CSS features. (This was changed with IE10, that uses a newer quirks mode engine by default, but its "IE5 Quirks mode" does behave like this.) Some examples:

  <table style="empty-cells:hide; border:1px solid">
   <tr>
    <td style="background:gray"></td>
    <td style="white-space:pre">White    space</td>
   </tr>
   <tr>
    <td style="outline:1px dotted">Dotted outline</td>
    <td><div style="display:inline-block; border:1px solid">div</div></td>
   </tr>
  </table>

In quirks mode, IE makes the color of the top left cell grey, while most other browsers hide it as per the empty-cells directive. In the top right cell, IE collapses the spaces, because it doesn't recognise pre. In the bottom left cell, IE doesn't draw the outline, and in the bottom right cell, IE ignores inline-block, making the div as wide as the cell.

In standards mode, there are no differences and all browsers behave by the rules.

White space
Dotted outline
div

No margin after missing </p> end tag

Given this HTML:

  <p style="font-weight:bold">the paragraph
  <div>in the div (after missing end tag)</div>
  after the div

In quirks mode, IE collapses the paragraph's bottom margin: there is no blank line between it and the div. Most other browsers give the p a correct bottom margin.

In standards mode, all browsers correctly display a blank line between the p and the div.

the paragraph

in the div (after missing end tag)
after the div

Note that this is not a case of the div being put inside the p. The p has ended, as you can see by the fact that the rest of the text is not bold.

Padding around images

Given this HTML:

  <img src="pic.png" alt="" style="padding:5px; border:1px solid">

In quirks mode, IE doesn't apply the padding, while most other browsers do.

In standards mode, there are no differences and all browsers apply the padding.

Margin anomalies

Given this HTML:

  <ul style="border:1px solid"><li>ul</li><li>ul</li></ul>

In quirks mode, IE draws the border around the text part, keeping the bullets out of the border, while most other browsers put the border around the whole structure.

In standards mode, all browsers put the border around the whole structure.

Font sizes

Given this HTML:

  This is a line with default size
  <div style="font-size:medium">This is a line with font size=medium</div>
  <font size="3">This is a line with font size=3</font>

In quirks mode, IE gives the second line a larger font size, while most other browsers give all lines the same size.

In standards mode, there are no differences and all browsers give all lines the same font size.

This is a line with default size
This is a line with font size=medium
This is a line with font size=3

Header sizes

Given this HTML:

  <div style="font-size:40px; font-weight:bold;">
   A 40px block
   <h4>A h4 in the same block</h4>
  </div>

In quirks mode, IE gives the h4 the same font size it would have without the container size (16 px), while most other browsers make it as large as the rest of the text in the container.

In standards mode, there are no differences and all modern browsers make the h4 as large as the rest of the text.

A 40px block

A h4 in the same block

Centering of nested block elements

Given this HTML:

  <div style="text-align:center">
   <div style="width:10em; border:1px solid">centered</div>
  </div>

In quirks mode, IE centers the inner block element in the window, while most other browsers align it to the left.

In standards mode, there are no differences and all browsers align it to the left.

centered

Width of block elements

Given this HTML:

  <div style="width:200px; padding:0 30px; border:10px solid"> test </div>

In quirks mode, IE makes the outer width of the div (measuring the border) 200 pixels wide, while it's 280 pixels wide (200 + 2×30 + 2×10) in most other browsers.

In standards mode, there are no differences and the outer width becomes 280 pixels in all browsers.

test

Content too high

Given this HTML:

  <div style="height:1em; border:1px solid"> line 1<br>line 2 </div>

In quirks mode, Opera and IE stretch the div to make room for the two lines, while most other browsers let the content overflow out of the div.

In standards mode, there are no differences and all browsers have the content overflow out of the div.

line 1
line 2

Images in block elements

Given this HTML:

  <div style="border:1px solid; width:30px; font-size:30px;">
   <img src="pic.png" alt="">
  </div>

In quirks mode, IE leaves room in the div below the picture for the descender, while most other browsers make the div exactly as high as the image.

In standards mode, there are no differences and all browsers leave room in the div below the picture for the descender.

Body styles

Given this HTML:

  <body style="width:400px; height:400px; margin:20px 50px; border:3px solid; padding:35px;">

In quirks mode, IE ignores all these styles, while most other browsers apply the styles normally.

In standards mode, all browsers apply the styles normally.

(Sorry, no live example here)

Button without type

Given this HTML:

  <form action="#">
   <p><input name="theInput"> <button>Enter</button></p>
  </form>

The button's default type is supposed to be submit, so you could omit this attribute in theory. However, in quirks mode, IE does not submit the page when the user clicks the button.

In standards mode, all browsers submit the page when the user clicks the button.

(Sorry, no live example here)

List bullet sizes

Given this HTML:

  <ul>
   <li style="font-size:10px">10 px</li>
   <li style="font-size:20px">20 px</li>
   <li style="font-size:30px">30 px</li>
  </ul>

In quirks mode, Firefox and IE give the bullets the same size, while the bullets scale with the text in most other browsers.

In standards mode, there are no differences and all browsers scale the bullets with the font size.

Errors with CSS: space in width spec

Given this HTML:

  <div style="width:15 em; border:1px solid"> test </div>

In quirks mode, Safari, Chrome and IE make the div 15 em wide, while most other browsers ignore the faulty width.

In standards mode, there are no differences and all browsers ignore the width, making it as wide as the window.

test

Widths without px

CSS widths without px are usually, but not always, accepted in quirks mode. Given this HTML:

  <div style="border:5 solid">border 5 solid</div>

In quirks mode, Firefox doesn't draw a border, while most others (including IE10 in normal quirks mode) draw a 5 pixel border.

In standards mode, this is not accepted and no browser draws a border.

border 5 solid

Width of inline elements

Given this HTML:

  <span style="width:200px; border:1px solid"> span </span>

In quirks mode, IE makes the span 200 pixels wide, while most other browsers make the span as wide as its contents.

In standards mode, there are no differences and all browsers make the span as wide as its contents.

span

Hex colours without #

Historically, hex colours without # were to be ignored in standards mode, although they were accepted in quirks mode. So given this HTML:

  <font color="00FF00"> font color 00FF00</font>
  <div style="background:999000; border:5px solid 000000"> 999000, 000000 </div>
  <div style="background:AAA000; border:5px solid A00000"> AAA000, A00000 </div>

We'd expect that all these things are fully coloured in quirks mode, but would have the default appearance in standards mode.

However, all is not right in quirks mode.
Although the font shows up OK, Konqueror, Safari and Chrome don't display the top div's background colour.
IE is OK with both background colours, but only displays the bottom div's border. Firefox doesn't display any of the backgrounds or borders, and Opera displays only the bottom div's background and border.

In standards mode, there are no differences and all browsers display everything the same. That is, they ignore all backgrounds and borders, However, in a surprise move, they all do make the font green!

font color 00FF00
999000, 000000
AAA000, A00000

Class names starting with a digit

Given this HTML:

  <style type="text/css">
  .7even {color:gray}
  [class="\37 even"] {text-decoration:underline}
  </style>
   .
   .
  <div class="7even"> test </div>

IE uses the first style rule in quirks mode, but not the second (the text becomes gray). Most other browsers (including IE10 in its default quirks mode) only use the second style rule, underlining the text, but not making it gray.

In standards mode, there are no differences and all browsers only use the second style rule.

test

And the reverse

Unfortunately, the reverse is also true: browsers can agree on something in quirks mode, but differ in standards mode. For example, given this HTML:

  <a href="#">An anchor <font color="green">with a font</font></a>

In quirks mode, all browsers display the second part of the text and its underline in green.

However, in standards mode, Opera, IE and Firefox make only the text green; they keep the underline in the colour of the a (usually blue).

An anchor with a font