HTML and CSS Reference
In-Depth Information
Riding to our rescue once again is the Holly hack, the jack-of-almost-all-trades when it
comes to correcting IE/Win rendering bugs. By assigning
height:1%
to the container element,
we ensure that IE is able to properly calculate the correct position for our absolute box, while
at the same time
incorrectly
ignoring the
1%
height and expanding the container to fit its contents.
(Other positioning oddities can occur, such as slight rounding errors; you can see one of these
issues in Figure 14-11, where the incorrectly positioned box doesn't completely touch the bottom
border. Luckily these are all fixed by our lovely hack.)
Live examples and some more esoteric details can be found at Position Is Everything's
“Absolutely Buggy II” (
www.positioniseverything.net/abs_relbugs.html
).
Whitespace Bug
It's not uncommon to use an unordered list (
ul
) for site navigation elements, so it's likely you've
seen this final IE bug before. Once again, for reasons known only to its programmers (and
possibly not even to them), IE will sometimes react to whitespace in your markup, leading to
unexpected and most certainly undesired results.
While other browsers ignore the whitespace, IE gives it life, usually ruining your layout
in the process. For example, let's say you're using an unordered list to create a 200-pixel wide
vertical navbar, with
display:block
declared on each
a
so the links fill the entire width:
Markup
<ul>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
</ul>
Styles
ul {
list-style:none;
background:#999;
width:200px;
margin:0;padding:0;
}
ul a {
display:block;
background:#ddd;
padding:.5em;
border-bottom:1px solid #fff;
}
IE insists on displaying the whitespace between each
li
when it renders the list. Although
this can be countered by removing the whitespace from your markup, it's not very friendly if
you need to edit it later:
