Extra Credit

 < Day Day Up > 



Now that we've gone over the basics in creating basic CSS layouts, it's important we talk about Internet Explorer versions 5 and 5.5 for Windows and their unfortunate misinterpretation of the CSS box model. Later, we'll also share a secret for achieving equal-height columns by the use of a tiled background image.

The Box Model Problem

Previously in this chapter we talked about building multicolumn CSS layouts, using only the width property to define each column's space. Things get a little more complicated when you start to add padding and/or borders directly to those columns. Why?

Unfortunately, version 5 of Internet Explorer for Windows incorrectly calculates the width of a container when padding and/or borders are added to the mix.

For instance, in any CSS1-compliant browser but IE5/Windows, a container's total width is a culmination of its specified width, padding, and border—combined. This is the way the W3C intends all browsers to handle the CSS box model.

But, IE5/Windows calculates the border and padding as part of the specified width. Confused? Not to worry; taking a visual look at the problem will help.

Seeing is Believing

Let's compare Figures 12-11 and 12-12. Figure 12-11 shows a 200-pixel-wide box with 10 pixels of padding on either side, as well as a 5-pixel border. Add up all of these values horizontally, and you'll come up with a grand total of 230 actual pixels.

click to expand
Figure 12-11: Correct calculation of the box model

click to expand
Figure 12-12: IE5/Windows' incorrect calculation of width, padding, and borders

This is the box model as it was intended—the width property always defines the content area of a box and padding and borders are added to that value.

So, if we gave a sidebar a width of 200 pixels and added padding and borders, the CSS declaration would go something like this:

 #sidebar {   width: 200px;   padding: 10px;   border: 5px solid black;   } 

We've specified a width of 200 pixels, but the physical space that the sidebar will require is 230 pixels—except in IE5/Windows, where the column will be a total of 200 pixels wide, including the padding and borders being placed inside.

Figure 12-12 shows that when we specify 200 pixels with the width property, our padding and border widths take away from the content area, rather than add to it.

Wavering Widths

What we're up against when using padding and borders for boxes is varying widths, depending on which browser the user is using. Yuck. This can throw off designs significantly for the millions that still use IE/5.x even today. And that's important to remember: at the time of this writing too many people still use IE5/Windows to ignore the problem.

So what to do? Well, fortunately, there's a hack to fix this. The hack enables us to serve two different widths—one for IE5/Windows and one for everyone else that gets the box model correct.

The Box Model Hack

Lovingly crafted by Tantek elik, the Box Model Hack (www.tantek.com/CSS/Examples/boxmodelhack.html) allows us to serve two widths—one that is adjusted and will only be recognized by Internet Explorer 5 for Windows, and another for every other browser.

By taking advantage of a CSS parsing bug that manifests itself only in IE5 and IE5.5/Windows, we can specify a width that is wider (to accommodate for the padding and borders), and then override that value with the actual width that other browsers will understand correctly.

Code by Example

For instance, if we wished our sidebar's content area to be 200 pixels wide with 10 pixels of padding and a 5-pixel border, again our CSS declaration would look like this:

 #sidebar {   width: 200px;   padding: 10px;   border: 5px solid black;   } 

For IE5/Windows, we'll want to specify a width of 230 pixels (the grand total with padding and border on both sides), and then override with the 200 pixels that are originally intended for compliant browsers.

 #sidebar {   padding: 10px;   border: 5px solid black;   width: 230px; /* for IE5/Win */   voice-family: "\"}\"";   voice-family: inherit;   width: 200px; /* actual value */   } 

Notice that IE5/Windows' value comes first, followed by a few rules that make IE5/Windows believe that the declaration has ended. Here, the voice-family property is used, and was chosen simply because it won't affect the visual display for browsers that understand it. Lastly, the actual width value is specified, thereby overriding the first width rule. The second width rule is ignored by IE5/Windows.

The results would be identical for both IE5/Windows and all other CSS2-compliant browsers. Without the hack, IE5/Windows users would get a skinnier column than desired.

Be Nice to Opera

For CSS2-compliant browsers that also fall prey to the parsing bug that IE5/Windows does, we'll want to add an additional declaration following any instances of the Box Model Hack. Dubbed the "Be nice to Opera" rule, it will make sure all capable browsers don't get "hung up" on the parsing bug and deliver the intended width.

 #sidebar {   padding: 10px;   border: 5px solid black;   width: 230px; /* for IE5/Win */   voice-family: "\"}\"";   voice-family: inherit;   width: 200px; /* actual value */   } html>body #sidebar {   width: 200px;   } 

With that, we've completed the workaround for IE5/Windows' misinterpretation of the CSS box model, and everyone should be happy.

Not Just for Widths

While we've used the Box Model Hack for getting equal widths in this example, the hack can also be used anytime we need to deliver different CSS to IE5/Windows. Any hack should be used with caution and with the understanding that it should be used only when necessary. It's a good idea to keep track of where you've used the Box Model Hack so that in the future you may easily remove it.

This particular hack is indispensable while millions of web users are still using IE5/Windows at the time of this writing.

start sidebar

The following section, "Faux columns," originally appeared at A List Apart magazine in January 2004 (www.alistapart.com/articles/fauxcolumns/).

end sidebar

Faux Columns

One of the questions I get asked the most often regarding my personal site's design is the following:

"How do you get the right column's background color to extend all the way down the page?"

It's a simple concept, really—and one that can be applied to any of the layout methods that were described earlier in the chapter.

Vertical Stretch

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning if a 200-pixel tall image is contained within a <div> element, the <div> element will only expand down the page 200 pixels.

This becomes an interesting dilemma when you use <div>s to section your markup, and then apply CSS to create a columnar layout like we've done earlier in the chapter. One column may be longer than the other (see Figure 12-13). Depending on the amount of content contained, it becomes difficult to create a layout with two equally tall columns when a unique background color is desired for each column.

click to expand
Figure 12-13: Columns of unequal length

There are a few ways to make the columns appear equal in length, regardless of the content that they contain. I'm sharing my particular solution (for use with an absolutely positioned layout), which happens to be pretty darned . . . simple.

The Cheat

The embarrassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits (www.simplebits.com), my background image looks something like Figure 12-14 (proportions changed for demonstration), with a decorative stripy thing on the left, a wide white section for the content column, a 1-pixel border, and a light brown section for the right column's background followed by the reverse of the left side's decorative border.

click to expand
Figure 12-14: tile.gif— A 2-pixel-tall background image, with widths allotted for columns

The whole image is no more than a few pixels tall, but when vertically tiled, it creates the colored columns that will flow all the way down to the bottom of the page—regardless of the length of content in the columns.

The CSS

This elementary CSS rule is added to the body element:

 background: #ccc url(tile.gif) repeat-y 50% 0; 

Essentially, we're making the entire page's background color gray and tiling it vertically only (repeat-y). The 50% 0 bit refers to the positioning of the background image—in this case, 50 percent from the left side of the browser window (resulting in a centered image) and 0 pixels from the top.

Positioned Columns

With the background image in place, my positioned layout sits on top, with padding and margins set for the left and right columns, ensuring that they will line up in the right place—within the faux columns created by the background image (see Figure 12-15).

click to expand
Figure 12-15: Tiled background image creates the colored columns.

It's important to note that if borders, padding, and margins are desired on either column, then we must still make up for IE/Windows' botching of the box model with Tantek elik's Box Model Hack (see "The box model problem" earlier in this chapter).

Alternatively, if borders or padding can be avoided altogether by just using margins instead, then the Box Model Hack won't be necessary. And if the column's content is simply sitting (transparently) on top of the tiled background, then it should be easy to avoid the hack.

Whatever Floats Your Boat

While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via any of the layout methods described earlier in the chapter.

The same idea applies: tile the background image, and then float a column in position to overlay the faux-column backdrop behind.

It's a simple concept, but one that may alleviate one of the frustrations that designers frequently encounter when building CSS-based layouts.



 < Day Day Up > 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net