Question

I have a simple design for my lists, with simple images, like :

<div class="image_list_tick">

  <ul>
    <li>one</li>
    <li>two</li>
  </ul>

</div>  

The CSS is :

.image_list_tick ul {
  list-style-image: url('green-tick2.gif');
  display: inline-block;
}

I tried that code in chrome and firefox and got weirdly different results.

FIREFOX :

The second one is what i would actually want to happen. Now, in chrome i also get this :

CHROME :

Note, the list itself should be centered in the middle of that page, even though it’s not shown in the above images. The point is to have the list in the center.

Any ideas ?

Answer 1

Remove the display: inline-block. It’s probably what causing it to go haywire. Also, there may be other (probably general) styles that affect your list. Use firebug or chrome developer tools to investigate it.

You want to do the following: “Keep the list aligned in the center of the page, but keep the list items aligned to the left of the list itself. Therefore, this example should be what you want. Code used (simplified):

div {
    text-align: center;
}
ul {
    list-style-image: url('http://i779.photobucket.com/albums/yy80/000jericho/tick_green_big.gif'); /* random tick mark I found */
    display: inline-block;
}
li {
    text-align: left;
}

Follow K.I.S.S and you should be fine.

Here’s a working example