facebook google plus twitter
Webucator's Free Advanced CSS Tutorial

Lesson: Browser-compatibility Issues

Welcome to our free Advanced CSS tutorial. This tutorial is based on Webucator's Advanced CSS Training course.

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, especially in older (9 or earlier) versions. In this lesson, we'll cover some of the most common ones and discuss how to deal with them.

Lesson Goals

  • Use quirks mode to test how your pages will appear in older browsers.
  • Work with conditional statements in older versions of Internet Explorer.
  • Deal with common browser bugs.

Quirks Mode

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

  1. Standards-compliant mode
  2. Almost standards mode
  3. Quirks mode

In standards-compliant mode, the browser does its best to display the page according to the latest CSS standards.

In almost standards mode the browser will treat everything the same as in standards mode except for the placement of images inside of table cells. Images will align with the very bottom of a table cell instead of text baseline that strict standards mode dictates.

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.

Controlling Browser Modes

The correct DOCTYPE declaration at the top of the HTML page sets the mode modern browsers will display the page in. Wikipedia provides an excellent guide to the different DOCTYPE declarations and the mode effect it has on browsers at http://en.wikipedia.org/wiki/Quirks_mode.

Setting the DOCTYPE gives the page designer control over how the browser agent will interpret and render HTML of the page.

Design Strategy

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

  1. Design for the most standards-compliant browsers first.
  2. Use a stylesheet reset.
  3. Check your pages in any and all browsers that you decide to support on your website. This would include earlier versions of browsers that might not interpret current standards correctly and may require adjustments to your pages and style sheets.
  4. Don't use tables for page layouts. HTML tables should be reserved for what they were originally intended, displaying tabular data. Using the CSS techniques you've learned in this course will, if done properly, give you clean coded layouts that are also standards compliant.
  5. Use the HTML 5 doctype (<!DOCTYPE html>). Not only is it cleaner but it will set browser agents to render your page using the latest standards mode. Only use the more verbose doctypes on pages that rely on quirk mode tricks or older table layouts.

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, in versions 9 and older, 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:

<!--[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 cannot be embedded within CSS. The following is invalid:

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

You would instead structure this as follows:

<style>
.MyStyle {
	background-color: red;
}
</style>

<!--[if lt IE 7]>
<style>
.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 older 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 6]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 6]>
<link href="ie5.css" rel="stylesheet">
<![endif]-->

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

</body>
</html>

Code Explanation

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.

For newer versions - IE version 10 or later - conditional statements no longer work: the browser will not read them. The good thing is that we have much less need for these conditional statements, since Internet Explorer 10 and later present many fewer quirks than did earlier versions. However, we may still need to handle browser inconsistencies. Another way to handle specific-browser issues is to use a Microsoft Internet Explorer-specific media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	p {
		font-size: 15px;
	}
}

The code above would, for instance, style all paragraphs with font size 15px for Internet Explorer version 10 and later.

Of course, in general we probably won't need to - and don't want to - create styles for each specific browser: using a stylesheet reset, like the one we've looked at from Eric Meyer earlier in this course, to remove browser inconsistencies is a better way to go, since we can then render our own styles for all browsers.

In the following section, we'll look at a common browser bug and use what we have learned in this section to address it.

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. 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>
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>

Code Explanation

The result is shown below in Firefox: Firefox Result

Safari shows a similar result: Safari Result

But Internet Explorer moves the legend down: Internet Explorer Result with Legend Moved Down

The solution to this problem is different depending on the version of Internet Explorer. For Internet Explorer versions earlier than 10, this can be fixed using relative positioning, with this code:

legend {
	position: relative;
	top:-1.1em;
}

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>
legend {
	position: relative;
	top:-1.1em;
}
</style>
<![endif]-->

The result: Result

That should make the legend look the same in earlier versions of IE.

Later versions (from 10 on) of Internet Explorer won't see the conditional IE tags; for those browsers, we use the IE-specific media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	legend {
		margin-top:-0.6em;
	}
}

Check out BrowserBugs/Demos/legend.html to see the finished file.

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