CODEWITHSUNDEEP
htmlcss
Trammell
Trammell

Reputation: 57

list-style-image is not working

I am trying to create custom bullet points and it is not working.

This is my HTML.

<div id="services">
    <ul id="serviceText">
        <h2 id="serviceHeader"><strong>Services I Offer:</strong></h2>
        <li>Intros</li>
        <li>Transitions</li>
        <li>Lower Third Titles</li>
        <li>Web Page Design</li>
        <li>and more...</li>                        
    </ul>
</div>

This is my CSS

ul#serviceText {
    list-style-image: url(images/checkmark.gif);
    font-size: 14px;
    float: right;
    padding-top: 5px;
    color: white;
}

My site is located here xdtrammell.com/lol if it helps you to see all my code.

Upvotes: 2

Views: 26155

Answers (6)

Otani Shuzo
Otani Shuzo

Reputation: 1238

my case was, the bullet was hidden or invisible when list-style: inside was not set.

Upvotes: 0

Vinodh K
Vinodh K

Reputation: 1

Just change the path to image folder in URL like this(../images/checkmark.gif) and "li" tag element is enough as a selector.

li {list-style-image: url(../images/checkmark.gif);}

Upvotes: 0

Jim
Jim

Reputation: 1294

Specifically I think you're trying to create custom bullets that are images, here is how I would do it.

The CSS

.list {
  margin: 0;
  padding: 0;
}

.list-li {
  background: url('../directory/your image here.jpg') no-repeat top left;
  margin: 0;
  padding: 4px 0 4px 20px;
  list-style: none;
}

The key thing to note is the background image is in the top left, so take that into consideration when you adjust your padding. Padding is: Top, Right, Left, Bottom.

The HTML

<ul class="list">
  <li class="list-item">lorem ipsum</li>
  <li class="list-item">lorem ipsum</li>
</ul>

I hope this helps!

Upvotes: 4

user3310835
user3310835

Reputation: 11

Does it need the ../ before the image URL so it knows to go up a directory? In other words, does your image exist in the top level directory or in one of the next-levels? If it doesn't exist in the top level then it needs "../"

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You're far better of using a CCS background for your list items than using list-style-image. You get far greater control over the positioning of the graphic and the spacing of the text.

See: http://preview.moveable.com/JM/ilovelists/

Upvotes: 1

Sotiris
Sotiris

Reputation: 40066

change your selector to ul#serviceText li. Also keep in mind that you can't include h2 element in ul. Is not valid html.

Upvotes: 6

Related Questions