Section 25.2. The Browsers

25.2. The Browsers

This section will address the most common browsers and the hacks and filters that can be used to make sure they get the CSS rules they need (or don't get the ones they don't understand) to render pages appropriately. We'll start with some of the older browsers that are still kicking around and work toward modernity.

25.2.1. Netscape Navigator 4.x

Thankfully, this archaic browser is finally on its way out with less than 0.3% market share according to most statistics, and probably even lower by the time you read this. Originally launched in 1997, Netscape Navigator 4 (NN4.x) was an impressive browser. Needless to say, it hasn't aged all that well.

NN4.x's CSS support is pretty basic and, although some people still spend time designing for it, most sites do not get the kind of traffic that would warrant spending much time discussing its numerous issues. In fact, most CSS designers and web standards advocates have, instead, embraced the idea of "graceful degradation" and provide only the most rudimentary styling (mostly fonts and colors) to this outdated browser.

Be sure to consult your own site's browser statistics to decide when, and if, you need to degrade your design for a particular browser. Remember that percentages can be misleading: 0.3% of users who visit your personal photo gallery is likely to be a far cry from the same percentage visiting eBay. To make a design degrade gracefully for NN4.x, you need to serve it a simple style sheet and hide the stuff it doesn't understand. This is easily accomplished by using NN4.x's basic understanding of CSS against it in one of two ways. The first involves use of the @import rule, which is not understood by NN4.x:

     <link rel="stylesheet" type="text/css" href="my_basic.css" />     <style type="text/css">@import(my_advanced.css)</style> 

In the above example, NN4.x applies the first style sheet because it understands how to "link" a style sheet. The second style sheet it ignores, because Netscape has no idea what @import is.

For years, this was the preferred method of degrading designs for NN4.x, but it has the side effect of causing a flash of unstyled content (FOUC) in Internet Explorer on Windows if the head of the document does not contain any link or script elements. (For more information on the FOUC, visit www.bluerobot.com/web/css/fouc.asp.)

A new method has emerged for leaving NN4.x out in the cold involving media type assignment. NN4.x only understands the screen media type, so by adding additional media types to the link tag:

     <link rel="stylesheet" type="text/css" media="screen,projection"       href="my_advanced.css" /> 

you can easily avoid NN4.x, and get the added benefits of hiding your more advanced styles from many handheld devices, sidestepping the FOUC altogether.

25.2.2. Internet Explorer 5.x on Windows

When it comes to CSS hacks, Internet Explorer 5.x on Windows (IE 5.x/Win) really started it all. This browser version has caused many problems for CSS designers, and perhaps the worst was its flawed implementation of the box model, which led to the first CSS hack. We'll get to that hack in a moment, but first you should examine why it was created.

The W3C box model is perhaps best explained as additive. For example, the overall width of an element's "box" is the sum total of its border-left-width, padding-left, width, padding-right, and border-right-width. In contrast, the box model implemented by IE 5.x/Win, sometimes called the border box model, is subtractive. In this incorrect interpretation, the overall width of an element is the value set as its width, while the padding and border widths are subtracted from that.

Take a look at a simple example:

     div {       border: 5px;       margin: 20px;       padding: 20px;       width: 200px;     } 

To illustrate the vast ocean of difference between the two box models, consider Figure 25-1.

Figure 25-1. A comparison of the W3C and border box models

Clearly, this might present a problem, particularly with column-based layouts. In browsers that render according to the spec, the total width of the element's box is 250 pixels, or the following:

5px + 20px + 200px + 20px + 5px

The border box model would keep the overall width of the box at 200 pixels, squeezing the contentwithin the border and paddinginto a mere 150 pixels, or:

200px - 5px - 20px - 20px - 5px

To get IE 5.x/Win to play well, Tantek Çelik, a Microsoft employee working on the Macintosh version of IE, invented something he dubbed the Box Model Hack. The hack uses the voice-family property (which is not supported by the browsers) along with some CSS-escaped quotes to trick IE 5.x/Win into thinking the declaration block has been closed. The following example demonstrates its use on a problem div:

     div {       border: 5px;       margin: 20px;       padding: 20px;       width: 240px;          /* <-- 1 bad width fed to WinIE5.x         */       voice-family: "\"}\""; /* <-- 2 WinIE5.x sees the end of the rule */       voice-family: inherit; /* <-- 3 proper parsing browers reset here */       width: 200px;          /* <-- 4 the real width                    */     } 

This hack caused a little problem in the Opera version available at the time (which, likewise, did not understand the voice-family property), newer versions of Opera do not have the problem, so you can safely ignore the old workaround.

More recently, Tantek devised an even better way to target these two problem browsers using what are called filters. Similar to how you hide styles from NN4.x, you can now show a particular style sheet to either of these two browsers. For example, to feed a specific style sheet to IE 5/Win, you would use the following @import within a style element in the head of your document or (better yet) within a linked or imported style sheet:

     @media tty {       i{content:"\";/*" "*/}}; @import 'hacks.pc.ie5.css'; {;}/*";}     }/* */ 

To do the same for IE 5.5/Win, you would use:

     @media tty {       i{content:"\";/*" "*/}}@m; @import 'hacks.pc.ie55.css'; /*";}     }/* */ 

In a volume such as this, we can't discuss the hows and whys of these filters, but, if you want to know more, visit Tantek's site at www.tantek.com/CSS/Examples.

Using filters such as these, you can keep your hacks separated from your proper CSS, which is the best way to manage CSS hacks over the long term, but more on that later.

Many of the browser issues encountered when dealing with IE 5.x/Win are also present in Internet Explorer 6, so the discussion can be found in that section. Also, if you are having trouble tracking down a computer old enough to still be running these browsers, you can download standalone versions from browsers.evolt.org/?ie/32bit/standalone. Now it's time to leave the Windows environment for a brief moment and check in with Internet Explorer's wiser (yet still buggy) counterpart on the Mac.

25.2.3. Internet Explorer 5.x on Macintosh

At the time, Internet Explorer 5 for Macintosh (IE 5.x/Mac) was tops for CSS-based design. IE 5/Mac's rendering code, dubbed The Tasman layout engine (which Tantek Çelik led the development of), was the first to offer complete support for CSS Level 1, HTML 4.01, PNG 1.0, as well as child and adjacent sibling selectorspretty advanced stuff for 2000. That said, IE 5.x/Mac has its share of problems, too.

Many of IE 5.x/Mac's issues revolve around positioned elements and floats, resulting in unnecessary scrollbars, elements that are too wide, incorrect wrapping, and phantom margins. Though there are fairly straightforward workarounds for these bugs, some CSS designers have started to degrade their designs for IE 5.x/Mac as well. That said, there are many who continue to support IE 5.x/Mac to serve the numerous folks (often in public schools) using Macs that can only run Mac OS 9.x, where IE 5.1/Mac is the best browser they can use. Again, consulting your server logs is a good idea before dropping complete support for any browser.

You can find a compendium of many IE 5.x/Mac bugs (as well as fixes for them) at www.macedition.com/cb/ie5macbugs/index.html.

There are a few different ways to hide CSS rules from IE 5.x/Mac. The first is known as the Commented Backslash Hack (www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html):

     div {       color: red;   /* <-- shown to IE5.x/Mac      backslash --> \*/       color: green; /* <-- hidden from IE5.x/Mac       reset -->  */     } 

IE 5.x/Mac sees the backslash (\) and escapes the asterisk (*) in order to read it as a literal character, making it miss the close of the first comment. The browser assumes that everything that follows is still part of the comment and does not apply the rules. When it reaches the next comment, it sees the comment close normally and it assumes that to be the close of the original comment. Figure 25-2 gives a little better idea of how IE 5.x/Mac parses the above rule (minus the comments' contents) and how normal browsers parse it.

Figure 25-2. The correct interpretation of the Commented Backslash rule and the IE5.x/Mac interpretation

You also can exploit this particular bug in the IE 5.x/Mac parser to show certain styles (or an entire stylesheet) to that browser, as is the case with the IE 5/Mac Band Pass Filter developed by Tantek Çelik and documented by Douglas Bowman (www.stopdesign.com/examples/ie5mac-bpf):

     /*\*//*/       @import "hacks.mac.ie5.css";     /**/ 

This filter inverts the Commented Backslash Hack , showing the imported style sheet to IE 5.x/Mac and hiding it from every other browser. If your site needs to support IE 5.x/Mac, this is a very useful tool, allowing you to quarantine all the fixes this browser needs (see Table 25-1). Similarly, if you can get away with degrading your design in that browser, you can import the style sheet you want to hide from IE 5.x/Mac into the style sheet you want to show it.

The W3C spec allows for an @import rule to receive a string or a URL as an argument. As the W3C recognizes strings as any value between either single or double quotes, it is perfectly legit to use any of the following three means of importing a style sheet:

     @import "my.css";     @import 'test2.css';     @import url(my.css); 

For example, in your document, you could add a linked style sheet:

     <link rel="stylesheet" type="text/css" media="screen"       href="simple.css" /> 

and then inside that linked style sheet, import another, more advanced style sheet, being careful to use single instead of double quotes:

     @import 'test2.css'; /* <-- import for all other browsers */           /* The rules for IE5.x/Mac go here */ 

This particular filter does double duty, as it works to serve only the basic styles to NN4.x as well, so you can ensure consistency in your degraded site design.

Table 25-1. IE5.x/Mac bugs and fixes at a glance

Bug	Fix
Elements absolutely positioned to the right/bottom edge of the screen cause horizontal/vertical scrollbars: div { position: absolute; bottom: 0; right: 0; }	Negate the hidden 15px margins: div { right: 15px; margin-right: -15px; bottom: 15px; margin-bottom: 15px; }
Shorthand margins will not center a table: table { margin: 0 auto; }	Use longhand properties for setting the margins: table { margin-left: auto; margin-right: auto; }
An applied background-image is always positioned underneath the border of an element.	Use another element for the border if the border must be outside the background-image.
Use of overflow: auto can cause the page to expand to fit the entire contents of the elementeven though part of it is hiddencreating scrollbars.	Always set width and height properties on any element on which you set overflow: auto.
clear is inherited into floated elements when the parent element has a clear value, even when the floated element is styled to clear: none.	No fix available.

25.2.4. Internet Explorer 6

This Windows-only browser is the bane of many a CSS designer's existence, mostly because its CSS parser and layout engine (Trident ) has not seen an upgrade since the browser was released in late 2001. The major differences between Internet Explorer 6 (IE 6) and the IE 5 series for the PC (first introduced in 1999) were the inclusion of the DOCTYPE switch and the fixing of numerous CSS 1 bugs in "Standards mode."

Because IE 6/Windows's rendering engine has remained largely unchanged since its release, its bugs (see Table 25-1) are fairly well-documented and there are several ways to show/hide particular styles. You can find information about these bugs and more at www.positioniseverything.net/explorer.html.

To show a particular declaration block to IE 5+, you can use the Tan Hack (www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html or as it is sometimes known, the * html (Star HTML) Hack:

     div {       color: green;     }     * html div { /* <-- will target IE5+ */       color: red;     } 

In any (X)HTML document, html is the root element (it has no parent). What the Tan Hack is essentially selecting is an element (in the example, a div) that is a descendant of html, which is a descendant of anything (using the universal selector: *). Theoretically, that is impossible to do, but IE 5+ apparently has an implied parent of the html element in its internal model, and that implied parent matches the initial *, making it a means for targeting particular rules to overcome its bugs.

It is possible to hide style rules from IE 5+/Win by using selectors that are not understood by the browser. A few examples are:

     body>div#content {       color: green;     }     div+div#content {       color: green;     }     div[id='content'] {       color: green;     } 

All of the rules above use CSS 2 selectors (child, adjacent sibling, and attribute, respectively) that IE 5+/Win does not understand. In the interest of being forgiving (and somewhat forward compatible), when browsers encounter something they don't understand, they ignore it, so IE 5+/Win ignores all of the above rules.

Warning: whenever you use more advanced selectors (from CSS 2 or CSS 3) to hide rules from older browsers that don't support those selectors, make sure that the style rules you are writing are valid CSS (which you should always do anyway), and that the results you are expecting from those rules are in line with the specs. Don't use advanced selectors to send "fix up" style rules to non-compliant browsers.

When considering CSS hacks and filters , if at all possible, use them only for targeting older/obsolete/abandoned browsers. Avoid using hacks for current versions of browsers, as such code will likely break when those browsers are updated. With that in mind, Table 25-2 lists some IE 5+/Windows bugs and workarounds to consider.

Table 25-2. IE5+/Windows bugs and fixes at a glance

Bug	Fix
Content appearing alongside a floated element inside a box with width: 100%; will disappear (Peek-a-boo Bug; IE 6 only).	Apply height: 1% to the containing box (but hide it from IE 5.x/Mac): /*\*/ * html div { height: 1%; }/**/ This is known as the Holly Hack . It works by setting the height of a block to a small value (1% works almost universally). IE 5+/Win will make a box taller to fit the content (treating height like min-height) and trigger IE 5+/Win to behave as it should in many situations.
Disappearing backgrounds on lists (dl, ol, and ul) inside a block that is positioned relatively and floated.	Relatively position the offending list (but hide it from IE 5.x/Mac, which does not have this bug): /*\*/ * html ul { position: relative; }/**/ Although not technically a hack, using position: relative; can get you out of a lot of sticky situations with IE 5+/Win. There are many cases when you would not want to apply this rule, as it would create a new containing block where you might not want one, so use it sparingly.
The bottoms of floated elements are chopped off when certain links are hovered in the containing block (Guillotine Bug).	Apply the Holly Hack to the containing box.
An absolutely positioned element within a relatively positioned element has content that overflows off the bottom of the page without triggering scrollbars (Unscrollable Content Bug).	Apply the Holly Hack to the containing box.
When multiple elements are floated alongside one another, text from the final float is occasionally duplicated below it. (See www.positioniseverything.net/explorer/dup-characters.html.)	Drop the width of the floated elements so they do not reach the edge of the container or make the margin-right on the final floated element in the row -3px or less.
Margins on the same side of a floated element as the direction it is floated are doubled: div { float: left; margin-left: 100px; }	Set the display: inline; on the floated element. According to the W3C, display should be ignored on floated elements unless its value is none (www.w3.org/TR/CSS2/visuren.html#floats).
There is a 3px gap between text in a block-level element and a floated element around which it flows (3 Pixel Jog Bug).	Apply the Holly Hack to the block-level element.
A block-level element that clears a float will have its padding-top doubled if the content flowing around the float does not go beyond the bottom of it (affects IE 5.5/6 for Windows).	Apply the Holly Hack to the block-level element that clears the float.
Anchors inside a relatively positioned container will lose their applied background-image.	Relatively position the anchors.
When a box with a margin is nested in a box with padding, the margin-top of the inner box and padding-top of the outer box are not added.	Double the margin-top on the inner box.
class or id names that begin with an underscore (_) are ignored.	Avoid using class or id names that begin with an underscore.
The left value of an absolutely positioned element is calculated with regard to the left edge of the first element in the containing block, not the left edge of the containing block itself (IE 5.5 and 6 for Windows).	Adjust the left value accordingly or position the containing block absolutely.
Margins applied to a table are ignored (IE 6 ignores margin altogether, IE 5.x/Win ignores only margin-top and margin-bottom).	Put the table inside a div and apply the margins to the div instead.

25.2.5. The Mozilla Family (Mozilla, Firefox, and Netscape)

Mozilla has always been a popular browser among Linux programmers, and while its latest incarnation, Firefox, was still in alpha, it began causing quite a stir in the CSS world due to advancements made to its layout engine, Gecko . At the time of Firefox 1.0's launch, Gecko was the layout engine rendering closest to the W3C specs and supported enough CSS 3 to make the hardcore CSS designers salivate. All browsers in the Mozilla family (Camino, Firefox, Mozilla, and Netscape) use Gecko.

Netscape 8 (currently only available for Windows) allows the user to switch between the standard Gecko layout engine and the Trident layout engine from Internet Explorer. Also, America Online (AOL), the former parent of Mozilla, has released its own browser that sits on top of Internet Explorer 6.

Despite its best efforts, the Gecko engine still has a few quirks that need to be worked out (see Table 25-3), but, thankfully, they don't get in the way all that often. At the time of this writing, the Mozilla Foundation has released a beta of Firefox 1.5, and there have yet to be any new bugs discovered.

Table 25-3. Gecko bugs and fixes at a glance

Bug	Fix
position: relative; is not supported on table elements.	Wrap the table in another block-level element that can be positioned relatively, such as a div.
Any floated element following a heading (H1, h2, etc.) will be overlayed by the first line of text that should flow around it.	No fix available.

25.2.6. Safari

Safari is the Apple-built browser that began shipping with OS X 10.3 (Panther) in late 2003 and is now the default browser for Macintosh. It uses the WebCore layout engine, which is based on Konqueror's KHTML layout engine . Safari 2.0 (also known as Safari RSS) was released in 2005 along with OS X 10.4 (Tiger), just two days after David Hyatt, the lead developer on Safari, and his team managed to make Safari the first browser to pass the Web Standards Project's Acid2 test . Until Safari 2.0.2, which is just getting disseminated, no significant improvements to CSS handling or support had been made since Version 1.1, so that is what we will address here.

The Acid2 test (www.webstandards.org/act/acid2/) was released in mid-April 2005 by the Web Standards Project as a way for makers of web browsers and web design tools to test their adherence to mature web standards. As of this writing, development versions of iCab and Konqueror have passed the test, and Opera should pass by the time this book publishes. On October 31, 2005, Safari 2.0.2 became the first publicly released, non-beta, non-preview browser to pass Acid2.

Konqueror is the web browser and file manager/viewer part of the K Desktop Environment (KDE) and is quite popular on Linux/Unix operating systems. Currently, its market share is too small for it to be discussed here, but the developers are working to integrate much of the work on Safari's WebCore layout engine back into KHTML.

At this point in time, there are no reliable Safari filters or hacks and, with the release of the revised WebCore layout engine, the market share of the older Safari versions may drop off before any are invented. Likewise, although initial (1.x) versions of Safari had numerous bugs and quirks, as of Version 2.0+ there are relatively few layout bugs remaining in the Safari browser (see Table 25-4).

Table 25-4. Safari bugs and fixes at a glance

Bug	Fix
Setting the display property of a fieldset to inline will make form controls unclickable. fieldset { display: inline; }	Position the fieldset: fieldset { display: inline; position: relative; }
Combining the :hover pseudoclass with an adjacent sibling in a selector causes erratic behavior. dt:hover+dd { color: green; }	No fix available.
When the font size is enlarged, generated content can cause text to be pushed outside of its bounding box.	No fix available.

25.2.7. Opera

Historically, Opera has had a few CSS quirks, but the last few versions have been relatively stable. Market share for this browser has been low, yet steady. As of September 2005, with the release of Opera 8.5, the browser became free to the public (and free of ads), meaning its market share will likely increase. That same year, Opera made major inroads in the mobile market with Opera 8 and Opera Mini, making this a browser to watch closely.

As of this writing, Opera is readying Version 9 of its browser, which uses the Presto layout engine and is close to passing the Acid2 test. Versions 8 and 8.5 have very few bugs to speak of (see Table 25-5), making this browser very easy to support, and making filters and hacks unnecessary.

Table 25-5. Opera bugs and fixes at a glance

Bug	Fix
Using the border-width property on a block absolutely positioned to the bottom of its container will result in a padding-bottom equal to the border-top value (affects Opera 7.5-8.5). div { position: absolute; bottom: 0; border: solid #000; border-width: 20px 10px 10px 5px; }	Set different border widths via the individual border-width-* properties: div { position: absolute; bottom: 0; border: 10px solid #000; border-top-width: 20px; border-left-width: 5px; }
Combining the :hover pseudoclass with an adjacent sibling in a selector doesn't work. dt:hover+dd { color: green; }	No fix available.
When inside a containing block that is positioned on a page by text-align: center or text-align: right, an absolutely positioned element will be positioned based on where the containing block would have been if it were not affected by the text alignment.	No fix available.