It has become fairly common practice to use CSS to fill the contents of an empty DIV tag. For example, I’m working on a project now that uses the following DIV:
<div id="main_nav_top_shadow"></div> |
And with CSS I’m giving that div a fixed height and a repeating background image that creates the appearance of a shadow being cast upward on top of my main nav.
#main_nav_top_shadow { height: 6px; background-image: url(../images/main_nav_top_shadow_x.gif); background-repeat: repeat-x; } |
The problem is that IE6 thinks that the empty space consists of text. Empty text, but text nonetheless. So what happens is that whatever the default font size for that particular DIV becomes the height of the DIV, rather than my specified height: 6px; in the CSS. There are 2 fixes for this problem, one of which I’ve been using forever and another I just stumbled upon and which prompted me posting both solutions. Both are fairly easy.
Solution #1
This solution is the one I’ve been using forever. Basically, you just choose a font size that’s smaller than the height you are setting.
#main_nav_top_shadow { height: 6px; font-size: 1px; background-image: url(../images/main_nav_top_shadow_x.gif); background-repeat: repeat-x; } |
That usually does the trick. But this has always seemed wrong. I can’t say why, it just feels weird. Maybe it’s the fact that I’m setting a font size for no text at all.
Solution #2
This solution I found this week and actually makes more sense to me. It involves using simple HTML comments. And not the [if IE] stuff either. Just a plain simple comment:
<div id="main_nav_top_shadow"><!--Leave this empty--></div> |
It does not matter what text you put in there. It’s not any command to the browser or anything. But it works, by darn! I guess IE6 feels more comfortable not having anything in that div, as long as you put a comment there.
Not only does that work, but it is the right thing to do. After all, the next guy to come along and read your code might see an empty DIV and be tempted to remove it because it contains no content. This way you can leave some nice little message pleading the proverbial programmer to leave well enough alone!
Subscribe to