Beyond Custom Bullets: MSIE5.01 SP2/Win Fix
Tuesday / 27 July 04
For a reasonable amount of times web designers have picked up the trend to carefully reconsider which images should be content and which should be shown as a background image (as they are not part of the content).
A fairly well known technique is to disable list-style for a list-item and instead apply a left padding with a non-tiling background image (one that resembles a list bullet). Reasons for using this technique has been explained before already.
Due to MSIE5/Win’s incorrect implementation of the CSS Box Model, this technique is a lot harder to apply to inline text, say links. MSIE5/Win (excluding MSIE5.5 SP2/Win) applies the padding used to create space for the background image inside the content, not outside as it should. This results in the background-image appearing behind the content.
Normally you would have needed to make the choice between either removing it for MSIE5/Win, turning it into an image or adding extra markup. Not anymore. With two simple addittions and a bit of fiddling you can achieve a (near) perfect result. In any way, better than usually.
.foo {
background: url("image.gif") no-repeat 100% 50%;
padding-right: 14px;
height: 0;
margin: -3px 0;
}
I can hear you say “Huh?”. That’s exactly what I thought too. The first rule does the trick and the second rule
only fixes what rule one broke. height: 0; seems to force MSIE5/Win to calculate the correct dimensions for the inline
element. As a result it automatigically puts the padding right (as indicated by the red borders).
Note: width: 0 accomplishes the same effect in MSIE5.01 SP2/Win, but will require you to use white-space: no-wrap
to keep the text on a single line. Unfortunately, this combination does not seem to work on MSIE5.5 SP2/Win.
Thanks to this rule, MSIE5/Win shifts the inline element vertically. Unfortunately, this can’t be
fixed by altering the line-height, as it would affect other browsers as well. By adding a top and bottom negative margin,
you can reposition the element without affecting other browsers: margin: -3px 0;. The value of this top/bottom margin completely depends on the font size you are applying this on. I haven’t been able to discover a pattern, but you should be able to discover the right
value quite easily by experimenting.
This wraps up a little fix for MSIE5.01 SP2/Win. Any comments and suggestions are of course more than welcome.
