ul Class line-style not working, in any form

Question

I have an unordered list, with a css class tag attached to it, every attribute attached to this class with CSS works, EXCEPT the "list-style" attribute. (Basically i'm trying to get bullet points using my own image, a very simple task usually, but currently it really is not.

HTML Code:

<ul class="bullets">
    <li>The prices abo...</li>
    <br>
    <br>
    <li>The above t...</li>
    <br>
    <br>
    <li>If you wish ...</li>
    <br>
    <br>
    <li>Price is also depe...</li>
    <br>
    <br>
    <li>A white underb...</li>
    <br>
    <br>
    <li>If you w...</li>
</ul>

CSS Code:

ul.bullets li {
    font-size:12px;
    font-family:"Tw Cen MT";
    color:#000000;
    list-style:url('../images/bulleta.png');
}

As i say, every attribute within the CSS class works fine, except the list-style:url('bulleta.png'); attribute, the image is loaded onto the server, so not sure why it won't work, i've tried just attaching the class to the ul and also to the ul's list.

Anyone see where i'm wrong? Thanks for the help

Answer 1

It should work fine. See this fiddle. Make sure that you have indented the ul enough to see the images (uncomment line to see effect).

CSS:

ul
{
    //margin-left:100px;    
}
ul.bullets li
{
   font-size:12px;
   font-family:"Tw Cen MT";
   color:#000000;
   list-style:url('src');
}

HTML:

<ul class="bullets">
    <li>The prices abo...</li>
    <br><br>
    <li>The above t...</li>
    <br><br>
    <li>If you wish ...</li>
    <br><br>
    <li>Price is also depe...</li>
    <br><br>
    <li>A white underb...</li>
    <br><br>
    <li>If you w...</li>
</ul>

You may also want to look at the network tab (first bring up the dev tools, normally CTRL SHIFT i) in the browser to make sure that the image is actually being retrieved.

Update

Based on the link you sent, I can see what is happening, media='all' is overriding the display of list-item.

Note that the media=all display is overriding the list-item. When I unselect this style, your images appear.

As a simple solution you can just add display:list-item; to ul.bullets li. CSS will use the most specified.

Answer 2

I don't see any problem in your code else that the image source of the list style is broken. You have to check it again. This is a jsbin demo exactly typical your code except the url of the image: