Reconstructing the Site Using Transitional Means

CSS Workarounds

Ever since CSS became prevalent enough for widespread use yet still remained problematic in terms of browser support, one of the most difficult CSS problems to address has been making sure that people with partial or no CSS can get to your content. This isn’t so much of a problem if you’re still using tables for layout or sticking to simple HTML structures. But if you’re using CSS positioning and floating, you end up having to provide some workarounds to ensure that your site visitors are getting to the goods.

This section outlines two important workarounds, the box model hack and the @import trick, both useful in better rendering and graceful degradation.

Hack or Workaround?

Web authors and programmers are discussing whether these methods are hacks, workarounds, or justifiable uses of CSS. Using @import to seemingly trick Netscape 4.x browsers into graceful degradation is not an actual misuse of the rule. The box model hack, however, is thought by some people to misuse properties to fake out the browser, although other experts feel this is acceptable because the CSS used does in fact validate… The bottom line is that at least for the foreseeable future, workarounds for CSS implementation problems are going to be in use for some time.

The Box Model Hack

Tantek Çelik, lead developer for Microsoft IE for Macintosh, defined this workaround. The problem is this. The box model, which was described in detail in Chapter 3, “Writing CSS,” is misinterpreted in a number of browsers, including IE 5 for Windows. This means that there’s significantly different rendering of boxes between browsers.

Note 

 Tantek Çelik’s original description of this workaround is at www.tantek.com/CSS/Examples/boxmodelhack.html .

The problem, which I’ll paraphrase from Çelik’s explanation, has to do with the differences in the way user agents calculate borders and padding. Consider the following:

#box1  {      border: 10px solid red;      padding: 20px;      background: blue;      width: 300px; }

This CSS would create a box that has a 10-pixel border to each four sides, padding around the entire box to a measurement of 20 pixels, and a set width of 300 pixels. If you’re calculating the box model properly, you would add border and padding measurements to the 300-pixel content area, not subtract from them, making the content area small. To properly calculate the total width, including content, border, and padding:

• 10 pixels left border +

• 20 pixels left padding +

• 300 pixels content area +

• 20 pixels right padding +

• 10 pixels right border =

The box should be a total of 360 pixels wide, as shown in Figure 6.15. The border constitutes the 10 pixels in red and there’s padding between the border and the text, but the actual text box itself is still 300 pixels for the content area.

Figure 6.15: Anatomy of a correctly interpreted box

Misinterpretations of the box model place the border and padding inside the defined content width. As you can immediately see, if you define a box to have 300 pixels and then any borders and padding are subtracted from your content area, that area is unfairly minimized. A browser that improperly manages this will calculate the box as follows:

• 300 pixels content area –

• 20 pixels left padding –

• 10 pixels left border –

• 20 pixels right padding –

• 10 pixels right border =

The content area of the box is now 240 pixels wide, and the total width of the box is 300 pixels.

The workaround that Çelik describes styles the box with the original parameters except instead of the proper width measurement, it uses the misinterpreted measurement of the desired box.

#box1  {      border: 10px solid red;      padding: 20px;      background: blue;      width: 360px; }

Then, by adding two properties from Aural style sheets (not covered in this book), this workaround takes advantage of a CSS parsing bug in IE 5 and 5.5 for Windows, allowing compliant browsers to read an instance of the correct width:

#box1  {      border: 10px solid red;      padding: 20px;      background: blue;      width: 360px;      voice-family: "\"}\"";        voice-family:inherit;      width: 300px; }

Çelik also adds another rule to help correct rendering in those browsers with CSS2 support:

html>body #box  {      width: 300px; }

Note 

 If you are using the XML prolog in your documents, IE 6 for Windows switches to “quirks” mode. Because compliance mode in IE 6 has corrected box model support, developers should leave the XML prolog off for the most consistent rendering between browsers possible.

Using @import

Because of Netscape 4.x’s problematic implementation of style sheets, CSS layouts aren’t very effective for that browser. However, designers have combined a flaw in the browser and a CSS technique to help gracefully degrade the layout so that the page is at least readable.

This is done using the @import workaround, which exploits the fact that Netscape 4.x doesn’t understand the @import rule. As a result, you can link to one style sheet with styles that Netscape 4.x does understand and use the @import method to bring in another style sheet for the layout. This will create a readable page in Netscape 4.x and allow browsers that can interpret both the @import rule and the layout styles to properly lay out the document. Without this workaround, the page could be completely unreadable in Netscape 4.x.

The following snippet shows the @import rule at work alongside a linked style sheet to display styles supported by Netscape 4.x.

<head> <title> Welcome</title> <!— begin style sheet for site-wide styles supported by many browsers —> <link rel="stylesheet" type="text/css" href="site.css" /> <!—  begin style sheet for positioning. it is imported so Netscape 4.x excludes it and displays the content in readable format —> <style type="text/css" media="all"> @import "position.css";</style> </head>

Note 

 Another advantage to using the @import rule is that browsers that do not support CSS will also be able to view the unstyled document.

Figure 6.16 shows a web page from a site using CSS layout in Netscape 7 for Windows. Compare this figure to Figure 6.17, which is a shot of the page as viewed in Netscape 4. As you can see, the layout is lost.

Figure 6.16: Web page with CSS layout styles

Figure 6.17: No layout, but some styles, and the logically structured test is completely readable in Netscape 4.x.

However, the information is still logically structured, readable, and accessible, even if it doesn’t look too pretty.