HTML and CSS Reference
In-Depth Information
Only IE recognizes the
* html
selector, so in IE versions 6 and earlier, the image will not
display (see Figure 6-1). And again, since the selector has higher specificity, the hack can be
placed anywhere in the source order and will still override the simple selector.
Figure 6-1.
On the left, Camino on OS X displays the transparent PNG, but it is hidden from IE 6
on the right by the Star HTML hack.
Holly Hack (and an IE/Mac Filter)
Many display issues in IE/Win are the result of oddities in its rendering engine, specifically whether
an element has “layout,” which is the source of much consternation among web standards devel-
opers (read all about IE's
hasLayout
property at
www.satzansatz.de/cssd/onhavinglayout.html
if
you
really
want to know more). Elements behave quite differently when they have “layout” com-
pared to when they do not, and usually the desired behavior results from a box “having layout,”
which is triggered by applying any dimension to the box.
Named after the incredibly intelligent woman who discovered it, Holly Bergevin
(
www.positioniseverything.net
), the Holly hack builds on the Star HTML hack, using it to
deliver a very small height to specified containers in IE, which tells IE's rendering engine to give
the targeted element “layout.” Thanks to another bug in IE (which causes the browser to ignore
a specified dimension and instead expand a box to contain its contents), this height is ignored
and the box expands.
Because IE/Mac does not suffer from the same float bug as its Windows counterparts but
does process the Star HTML hack, a filter is used to hide the hack from that browser. The com-
bination of the three parts—Star HTML hack, the IE/Mac filter, and the Holly hack itself (the
{height:1%;}
declaration)—looks like this:
/* Hides from IE5-mac \*/
* html
.floatcontainer { height:1%; }
/* End hide from IE5-mac */
When fixing strange display behavior in IE/Win, this hack is often your best starting point for
a quick solution (see the next section for an example of the Holly hack in use).
