The problem

Screen shot of the problem.

FireFox and Internet Explorer have two different ideas about where to display a list-style-image. IE places them higher than Fire Fox. I'm not saying one or the other is wrong, it's differences that give us all headaches right? You can see it in action on the list below if you flip between the browsers:

A Fix?

Screen shot of the solution.

Usually we fix this by not using bullets but instead using background images. It's a good fix, but I found myself in a situation where I couldn't use it.

I discovered that through a combination of :first-line and vertical-align it was possible to jog them up in FireFox and not in IE. It's a first pass so it's buggy but here's what it looks like in action:

Did you know it was possible to use vertical-align on any inline element? Did you know that first-line is an inline element? This is what I'm doing:


/* without the padding IE places the first bullet in the list at it's corrected height, too high for us */

.fixed li:first-line{

Now that they're displaying consistantly you can add a little space at the top of the bullet image if you want to move it down :)

It works in IE 7 and FF 3.6 on Windows XP. It does not change Chrome 6 which still places the bullet as low as FireFox by default (text-bottom, I assume). You should tweet me if you test in other browsers.

Adding other properties to the lists might break it. I blew it up good a couple times working on the solution.