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 (
www.tantek.com/CSS/Examples/boxmodelhack.html
) 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>
</div>
</div>
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 {
width:200px;
height:150px;
}
#container-padding {
padding:10px;
}
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