MENU
I cannot stress enough how helpful this course was! I came into this training not knowing much about the product....More Testimonials »

Browser-compatibility Issues

Although browsers have much better support for the CSS standard than they did back in the version 4 days, there are still some bugs of which web designers need to be aware. For the most part, these are Internet Explorer bugs. In this lesson, we'll cover some of the most common ones and discuss how to deal with them.

Lesson Goals

  • To use quirks mode to test how your pages will appear on older browsers.
  • To work with conditional statements in Internet Explorer.
  • To deal with common browser bugs.

Quirks Mode

Modern browsers have at least two modes in which they can display content:

  1. Standards-compliant mode
  2. Quirks mode

In standards-compliant mode, the browser does its best to display the page according to the latest CSS standards. In quirks mode, the browser displays the page as if it were an older version of the same browser. The purpose of quirks mode is to make pages that were designed for the old browsers display the same in the newer browsers.

You won't find much difference between quirks mode and standards-compliant mode in Mozilla, Opera or Safari, but you may see big differences in Internet Explorer.

Turning Off Quirks Mode

By default, quirks mode is on. It can be turned off by adding the correct DOCTYPE declaration at the top of the HTML page. The following DOCTYPE declarations will turn on standards-compliant mode for all modern browsers:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

One gotcha in Internet Explorer is that quirks mode is always enabled if you include an XML declaration (<?xml version="1.0"?>), so we recommend you do not include one.

Quirks mode provides an excellent means of testing how pages will look on different browser versions.

Design Strategy

When designing your pages, we recommend you use the following strategy:

  1. Design for the most standards-compliant browsers first (e.g, Firefox).
  2. Check your pages in the latest version of Internet Explorer and fix any bugs. We'll discuss the best way to isolate this code shortly.
  3. Check your pages in Internet Explorer using quirks mode by temporarily cutting the DOCTYPE declaration and fix any bugs.

Depending on your need to support other browsers, you may wish to repeat steps two and three on those browsers as well.

Internet Explorer Conditional Statements

Internet Explorer provides a way of adding conditional statements that allow the designer to specify which version(s) of the browser should display certain sections. These conditional statements appear as simple HTML comments to other browsers (e.g, Firefox) and are therefore ignored. This can be very useful for addressing CSS bugs in older versions of Internet Explorer without having any impact on other browsers.

The syntax is shown below.

Syntax

<!--[if IE 7]>
	HTML Code only shows up on Internet Explorer 7
<![endif]-->

As you can see, the beginning if statement starts with the beginning of an HTML comment (<!--) and the endif statement ends with the end of an HTML comment (-->), so all other browsers view the whole contents as a comment and do not render any of the contained code.

The code shown above will only be displayed in Internet Explorer 7, but you can use operators to specify multiple versions that will display a block of code. The operators are shown below:

Conditional Operators
Operator Description Example
! not <!--[if ! IE 7]>
lt less than <!--[if lt IE 7]>
gt greater than <!--[if gt IE 7]>
lte less than or equal <!--[if lte IE 7]>
gte greater than or equal <!--[if gte IE 7]>

Note that these conditional comments can not be embedded within CSS. The following is invalid:

<style type="text/css">
.MyStyle {
	background-color: red;
	<!--[if lt IE 7]>
		background-color: blue;
	<![endif]-->
}
</style>

You would instead structure this as follows:

<style type="text/css">
.MyStyle {
	background-color: red;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
.MyStyle {
	background-color: blue;
}
</style>
<![endif]-->

The following example shows how you might structure an HTML page using Internet Explorer's conditional comments to deal with IE-specific bugs.

Code Sample:

BrowserBugs/Demos/ConditionalCommentsStructure.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<head>
<link href="main.css" rel="stylesheet">
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 7]>
<link href="ie7.css" rel="stylesheet">
<![endif]-->

<title>Conditional Comments Structure</title>
</head>
<body>

</body>
</html>

The advantage of such a structure is that it separates the CSS hacks from the main style sheet, so main.css should standalone as a nice clean CSS file that works great with the browsers that support the standard well.

In the following section, we'll look at some common browser bugs and use what we have learned in this section to address them.

Common Browser Bugs / Issues

Positioning Legends

In the Styling Forms with CSS lesson, we pointed out that the positioning of legends gets messed up in Internet Explorer when the border fo the fieldset is set to 0. For example, take a look at the simplified form below:

Code Sample:

BrowserBugs/Demos/legend.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
fieldset {
	border:0;
	background-color:#cee;
	padding:10px;
}
legend {
	font-weight:bold;
	font-size:1.2em;
}
</style>
<title>Password Reminder</title>
</head>
<body>
<form method="post" action="action.php">
	<fieldset>
		<legend>Password Reminder</legend>
		<label for="Email">Email:</label>
		<input type="text" size="20" name="Email" id="Email" title="Email">
	</fieldset>
	<fieldset id="buttons">
		<input type="submit" id="Submit" name="Submit" value="Login">
	</fieldset>
</form>
</body>
</html>

The result is shown below in Firefox 3:

Safari shows a similar result:

But Internet Explorer moves the legend down: Again, this is a result of the border: 0 declaration in the rule for legend.

This can be fixed using relative positioning, with this code:

legend {
	position: relative;
	top:-.6em;
}

But if we put that into the general rule for legend, it will mess up other browsers, so we need to use an Internet Explorer conditional comment:

<!--[if IE]>
<style type="text/css">
legend {
	position: relative;
	top:-.6em;
}
</style>
<![endif]-->

The result:

And now the legend will look similar in all browsers.

As code is always changing, we see now that CSS is evolving. As of this writing, CSS3 is becoming useful in ways we never thought possible. To learn some of the new features and their browser compatibility, visit http://www.caniuse.com.

← CSS Best Practices

Client Success
  1. Compare Us
  2. Client List
  3. Testimonials
Join The Team
  1. Learn how you can become a Webucator Trainer
  2. Career Opportunities
Locations
© Webucator, Inc. All rights reserved. |Toll Free: 1-877-932-8228Toll Free: 1-877-932-8228 |Outside the USA: 315-849-2724|Fax: 315-849-2723