HTML and CSS Reference
In-Depth Information
<h1 id="logo">
<a href="/" title="return to the homepage">My Snazzy Logo</a>
</h1>
and your rules something like this:
#container {
position:relative;
}
h1#logo {
position:absolute;
left:15px;
top:20px;
margin:0;padding:0;
}
but for some strange reason known only to the developers of IE 6 (and possibly not even
them), the logo vanishes from the screen entirely when viewed in that browser (it happens).
You don't have time to figure out
why
IE is shifting your client's logo into space—you just need
to get it fixed and move on.
After a few rounds of trial and error, you discover that changing to
position:relative
and
using a bottom margin of
negative-170px
puts the logo back in its proper place in IE. Weird.
Confused but satisfied, you drop the IE-specific rule (using the Star HTML hack, covered later
in this chapter) in your hack style sheet like this:
* html #logo {
position:relative;
margin-bottom:-170px;
}
Your work is done. You forget about the hack and IE's strange behavior, and you move on
with your life. Seven months later, the client decides he wants the logo on the site to be bigger
and lower on the page. “No problem!” you say with confidence, and you make the change. Only
now the logo doesn't position properly in IE. Rather than rely on your memory (or more trial
and error) to figure out what's going wrong, let a few simple comments do the work for you.
Here's the original
h1#logo
rule, with an added comment referencing the hack:
/* this positioning does not work in IE6, hack used */
h1#logo {
position:absolute;
left:15px;
top:20px;
margin:0;padding:0;
}
and now the commented version of the hack itself:
/* this corrects a strange positioning behavior in IE6
(the logo vanishes from the screen without it). Surprise surprise... */
* html #logo {
