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:

One
Two
Three is really long so you can see how it works on multiple lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in velit vitae nisi fringilla tincidunt dapibus vitae dui. Nunc pulvinar tempor laoreet. In leo turpis, imperdiet a egestas blandit, porttitor ac mi. Maecenas eleifend pulvinar tortor, eu iaculis mauris mollis placerat. Fusce metus sapien, rutrum sed faucibus venenatis, feugiat et dui. Donec semper eros vel velit imperdiet sit amet scelerisque arcu imperdiet. Aenean a nisi vitae eros lobortis interdum qui.
Four

A Fix?

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:

One
Two
Three is really long so you can see how it works on multiple lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in velit vitae nisi fringilla tincidunt dapibus vitae dui. Nunc pulvinar tempor laoreet. In leo turpis, imperdiet a egestas blandit, porttitor ac mi. Maecenas eleifend pulvinar tortor, eu iaculis mauris mollis placerat. Fusce metus sapien, rutrum sed faucibus venenatis, feugiat et dui. Donec semper eros vel velit imperdiet sit amet scelerisque arcu imperdiet. Aenean a nisi vitae eros lobortis interdum qui.
Four

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:


ul{

list-style-image:url(square.gif);

}



ul.fixed{

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

padding-top:2px;

}



.fixed li:first-line{

vertical-align:-25%;

}

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.