Hacks and Workarounds - Pro CSS Techniques - page 91

position:relative;
margin-bottom:-170px;
}
The comments remind you that you used a hack in the first place, and then why you used
the hack. It doesn't hurt to be specific when documenting your hacks, because you never know
when someone who isn't you will have to work with the styles you've created. Comments pro-
vide everyone with a roadmap.
A Few Good Hacks (and Workarounds)
OK, so there's no such thing as a “good” hack, but there are a few that it's useful to know about,
especially as long as IE 6 continues to command a large portion of the browser market. Just
remember, the fewer hacks you use, the better off we'll all be down the road.
May I Have the Envelope Please?
What follows is a selection of the must-have hacks that can save you time, effort, and frustra-
tion. Dog-ear these pages now, as you'll likely refer back to them many times (for a more
comprehensive—nay, exhaustive —list of browser hacks, visit www.positioniseverything.net ).
We also cover some more useful hacks in the “Hacking a Real-World Layout” section later in
this chapter.
Star HTML Hack
IE has an interesting quirk (prior to version 7, where this bug has been fixed): it recognizes an
additional, unnamed element outside the outermost element in the document ( html ). This
element is represented by the universal selector (or “star”), and allows the html element to be
targeted as a child, rather than the document's parent element (this is not supported any-
where in the CSS specifications, nor by any other browser). This bug can be used to target IE
(Mac or Win), and because it uses a parent element in the selector that no other browser rec-
ognizes, it also has higher specificity (meaning it can be located anywhere in the cascade's
source order, and will still override selectors meant for other browsers).
For example, to hide something from IE—say, a transparent PNG background image that
adds to the visual presentation but doesn't take anything away when missing—you can set the
value to none and just feed that to IE (because IE 6 and earlier can't display PNGs with alpha
transparency):
body {
background:#f90 url(bg_gradient.png) repeat-x;
}
* html body {
background-image:none;
}