Question

I have an unordered list with different bullet images and i’m trying to align the words for each list item as vertically centered. While I can do this in Chrome and Safari, the effect for vertical-align:top is not getting properly displayed in Firefox.

I have done a JS Fiddle right here. How can I amend the css so that the words appear vertically in the middle of each bullets in Firefox?

I’m replicating the JS Fiddle html codes here:

<ul>
    <li>Here is line one</li>
    <li>Here is line number two</li>
    <li>three with <a href="#">link</a></li>
</ul>

I’m replicating the JS Fiddle css codes here:

ul li a {
    line-height: 40px;
    vertical-align: top;
}

ul li {
    font-family: Arial,"MS Trebuchet",sans-serif;
    font-size: 12px;
    line-height: 40px;
    margin-left: 60px;
    margin-top: 20px;
    vertical-align: top;
}

ul li:first-child {
    list-style-image: url("http://chinee.heroku.com/assets/venue.png");
}

ul li:nth-child(2){
        list-style-image: url("http://chinee.heroku.com/assets/airport.png");
}

ul li:nth-child(3){
        list-style-image: url("http://chinee.heroku.com/assets/hotel.png");
}

Answer 1

The only way of getting consistent results across browsers is applying the list images as background images, so instead of list-style-image: url("hotel.png"); you use background-image: url("http://chinee.heroku.com/assets/hotel.png"); and position from there.

Here is an example:
http://jsfiddle.net/dC7xr/