In Chapter 3, Myth 3 mentions that, although there are still some compatibility issues between the different browsers, the main culprit is Internet Explorer with version 6 being the most troublesome. Although newer versions (7 and 8) have improved on their predecessor, they have their issues as well.
Fixing the problems in IE used to consume a lot of my time. Knowing the problems are primarily created by CSS quirks in IE, I now rely on three basic fixes to get my designs to work across all browsers.
As I have mentioned throughout this book, CSS is an interpreted language. The browser manufacturers take the standard and implement it to the best of their abilities. However, older browsers were often created before the standards had been fully defined. When the browser maker implemented a standard differently from the way it was later specified by the W3C, it’s called a quirk.
IE5 had a lot of quirks compared with modern browsers. Although IE5 is not commonly used anymore and IE6 fixed many of these problems, in order to allow backwards compatibility, Microsoft implemented a quirks mode in IE6 where it emulated IE5’s CSS. Unfortunately, quirks mode is easily triggered in IE6, causing a lot of design problems—most notably the box model problem described in Chapter 6, “Vocabulary.”
The simplest solution to IE quirks is to declare a Doctype at the top of your HTML, defining the version of HTML or XHTML you are using. This is generally set by the developer when they create the HTML, but if you are doing your own development, I recommend sticking with XHTML transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
In theory, this will force IE6 to use modern CSS standards, so you will have to do very little tweaking to your code to get your designs to conform to multiple browsers.
Unfortunately, if your code does not conform to the version you specify (e.g., there are any syntax errors), IE6 will automatically kick into quirks mode. So, unless you know your code will be perfectly formed and without error, this is not a practical solution.
One advantage IE has over other browsers is that you can define styles that only IE can see, even tailored for a particular version. To add conditional styles, use this HTML code:
<!--[if IE 6]><link src=“css/ie6.css” type=“text/css” media=“all”/><![endif]-->
This will load the style sheet ie6.css only if the browser being used is IE6. You can replace the “6” in if IE6 with another version number or leave it out entirely and the style sheet will affect all versions of IE.
You can now place any styles you want in the external file to “fix” any problems you see in the Web page. For example, you might include different padding to fix the box model problem described in Chapter 6.
The disadvantage of using conditional styles is that it means linking to more files (slowing down your Web page) and having to keep up with changes to more files.
Although possibly the least elegant solution, the underscore hack is the simplest and most direct IE fix. Place an underscore character immediately before a line of CSS code that you want only IE6 to see, and it is hidden from all other browsers. For example:
width: 250px;padding: 25px;_width: 300px;
If the browser is in quirks mode, this will reset the width of the box from 250px to 300px so it will appear to be the same width in IE6 as in other browsers.
The downsides to the underscore hack are that it only works in IE6 (not in newer versions), it will prevent your code from validating with the W3C CSS validator, and, if your browser is not in quirks mode, the values will be wrong, so its best to reserve this technique until after you try Fix.
Although on it’s way out, IE6 still has to be reckoned with. I’ve spent a lot of time fixing IE6 compatibility problems, and want to share the most common with you, along with which fix to use.
| The Box Model: The width or height of an element appears longer than in other browsers. FIX: If Doctype switching does not work, use conditional styles or the underscore hack to set a separate length. |
| Doubling Margins: The margins on floated elements are doubled. FIX: If Doctype switching does not work, use conditional styles or the underscore hack to set separate margins. |
| Stair-Step Elements: Instead of having their tops line up, floated elements look stair-stepped, with each subsequent floated element lower than the previous. FIX: Set the line height of the parent element to 0. |
No Min/Max Width or Min/Max Height: Before version 7, IE did not support the min-width, max-width, min-height, or max-height properties. FIX: Set conditional styles with the underscore hack to set absolute width or height. The good news is that IE6 treats height the way modern browsers treat min-height. NoteSee “Width and Height” in Chapter 6, “Vocabulary,” for more details on widths and heights. | |
| No Support for Dynamic Pseudo-Classes: Although IE6 supports pseudo-classes with links (<a>), it does not support pseudo-class styles applied to any other HTML tags. This is generally not a problem (the extra styles can be treated as a design enhancement), but if you are using an opacity or lighter colors in the non-active state, expecting the dynamic action to darken the element when in use, this can cause problems. FIX: Use conditional styles or the underscore hack to set an appropriate default color or opacity. NoteSee “Styles for Special Cases” in Chapter 4, “Syntax,” for more details on pseudo-classes. |
| No Alpha Support for PNG: Although it will display PNG images, IE6 fills any alpha channel with a muddy gray. FIX: Use conditional styles or the underscore hack to set a non-transparent PNG source image, or, if the image is in the background, load the image using the IE alpha filter. NoteSee “Using Transparent Images” in Chapter 11, “Chrome,” for more details on transparent PNGs. |
