HTML and CSS Reference
In-Depth Information
and Netscape browsers. The auto left and right margins on #wrapper keep things centered in
other browsers, and text-align:left; realigns the text within your layout (without setting it
again, all your text would be centered thanks to the earlier rule). The hack-less example layout
(see “A Sample Layout That Doesn't Need Hacks” later in this chapter) shows this method in use.
A Hack-less Alternative to the Box Model Hack
For a while now, the Box Model hack ( ) has
been a required tool in the virtual shed of most standards-based developers. It fixes a glaring
rendering error in IE/Win 5 and 5.5, where padding applied to a box is subtracted from the box's
specified width rather than added to it, as defined in the specification, resulting in messed-up
dimensions in those browsers. There is, however, a way to avoid using the hack, as long as the
thought of using an extra div doesn't make you ill (and it shouldn't—in the real world, things
are never ideal, and adding an extra element here or there is the lesser of two evils when com-
pared with a browser hack).
The hack-less way around this problem is simple: nest an extra div for padding inside
your div with assigned dimensions, like so:
<div id="container">
<div id="container-padding">
<p>some content</p>
We prefer to give an ID to the nested div so it is clearly labeled, but you can choose to
leave it out and just use a simple descendent selector instead (as long as you know there won't
be any other div s within your container).
The CSS looks like this:
#container {
#container-padding {
Because #container-padding doesn't have any stated dimensions, the incorrect math of
IE/Win 5 and 5.5 is no longer a factor. No hacks, no complicated mess—and it works the same
in all modern browsers.
Filters: The Sophisticated, High-Society Hacks
Though quickly becoming a thing of the past (thanks in part to more standards compliance
across the browsers), filters are hacks that don't actually fix anything, but rather allow you to
target or exclude specific browser versions (similar to IE conditional comments, but they can
Search WWH ::

Custom Search