Browser Comparison

Not all browsers render HTML code exactly the same. The differences are mostly very small and will usually not spoil the overall look of your web pages. The screen-shots in the examples below show what part of the same HTML page (styled with Cascading Style Sheets) would look like in a variety of browsers. Not all possible variations have been shown, but it easy to imagine how minor differences in browsers can change to appearance of your web pages. The differences may be due to the use of a Document Type Definition (DTD) or just the way the different browsers behave.

The resultant width and height are shown in each example. The difference in width might make a significant difference to how your web page looks. If this is likely it will pay to use a Document Type Definition. The height of an element will not usually make much impact on a page design, but it is shown to demonstrate how much variation there could be.

The CSS used:

.frame { width: 242px;
    border: 2px solid #8080ff;
    background-color: #cccccc;
    padding: 0px;
    margin: 0px }

.picture { float: right;
    padding-left: 5px;
    margin: 0px;
    border: 0px }

p { color: #000000;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    line-height: 130%;
    padding: 0px 7px 0px 7px }

The HTML used:

<div class="frame">
<img src="computer.jpg" class="picture" width="121" height="171">
<p>The principal advantages of HTML is that it has been designed to work on different platforms and it allows you to include hyperlinks to other documents on any web site.</p>
</div>

Example 1

  • Microsoft Internet Explorer v6
  • Microsoft Internet Explorer v7 (ClearType off)
  • Netscape Navigator v8 (emulation mode: Internet Explorer)
without DTD (Quirks Mode) with DTD
screen-shot example showing part of an HTML page styled with Cascading Style Sheets
242 pixels wide
214 pixels high screen-shot example showing part of an HTML page styled with Cascading Style Sheets
246 pixels wide

Without a DTD specified the entire width of the <div> is 242 pixels, instead of being 242 pixels wide plus the 2 pixel border. Because the <div> is narrower the text flow is affected, this might be more noticeable depending on the wording.

Example 2

  • Microsoft Internet Explorer v7 (ClearType on)
without DTD (Quirks Mode) with DTD
screen-shot example showing part of an HTML page styled with Cascading Style Sheets
242 pixels wide
214 pixels high screen-shot example showing part of an HTML page styled with Cascading Style Sheets
246 pixels wide

The layout is identical to Microsoft Internet Explorer v7 with ClearType off, but the text is much easier to read.

screen-shot example showing part of an HTML page styled with Cascading Style Sheets

Where a DTD has not been specified in both examples above there is a small gap to the right of the image. This is one of the many minor bugs in Microsoft Internet Explorer, in this instance caused by "floating" the image. The best way to avoid this type of problem is to specify a DTD.

Example 3

  • Netscape Navigator v7
  • FireFox 2
  • Opera v9
  • Netscape Navigator v8 (emulation mode: FireFox)
with or without DTD
screen-shot example showing part of an HTML page styled with Cascading Style Sheets
246 pixels wide
208 pixels high

Example 4

  • Safari v3
with or without DTD
screen-shot example showing part of an HTML page styled with Cascading Style Sheets
246 pixels wide
202 pixels high

The text is much easier to read and is slightly smaller - as you can see, the words "include hyperlinks" and "designed to work" each fit on the one line, unlike the other browsers.