Problem with list-style-image

[Norman]

Hi there guys. At Klayz.com we just published a new article divided on pages (using WordPress). In the first page we created a simple unordered list with all the anchors to the various article’s sections. This is the web page address:

Klayz.com is for sale | HugeDomains

Now, I was trying to add a simple icon to the left of the list items but I cannot figure how to do it. This is my actual CSS code for the list in that page:

#toc {
    margin-bottom: 20px;
}
#toc li {
    background: url(http://www.klayz.com/imgs/dot.gif) repeat-x bottom left;
    overflow: hidden;
    padding-bottom: 2px;
}
#toc a,
#toc span {
    display: inline-block;
    background: #fff;
    position: relative;
    bottom: -4px;
}
#toc a {
    float: right;
    padding: 0 0 3px 2px;
}
#toc span {
    float: left;
    padding: 0 2px 3px 0;
}

I tried adding this:

list-style-image: url('http://www.klayz.com/community/images/editor/createlink.gif');

to #toc but I can’t get it to work. Do you have any idea why it is not working? I just followed this example at w3schools.com.

Thank you in advance for any reply!

[RyanReese]

When I add that to #toc, it actually does add it, albeit small pixels of it. Add list-style-position:inside to Mentors

I’m not sure where you want it to end up.

[coothead]

Hi there Norman,

I cannot find an element with the id=“toc” attribute in the
page to which you referred.

Also note that you should apply “list-style-image” to the
“ul element” rather than to the “li element” .

coothead

[Norman]

@RyanReese

When I add that to #toc, it actually does add it, albeit small pixels of it. Add list-style-position:inside

What do you mean exactly with “albeit small pixies of it”?
I added list-style-position:inside but it’s added to the right of the texts. And I need it to the left.
I also tried varying from inside to outside. With outside it doesn’t seems to work at all, like before.

@coothead

I cannot find an element with the id=“toc” attribute in the page to which you referred.

Strange, I can correctly see it from FireBug. Here are some screens:

[Gandalf]

Hi there Norman. I’m not sure if it will help but what if you change your ordered list to an unordered list? I’m not sure if an image makes sense for an <ol>

[Norman]

Yes, you’re right gandalf458. I changed from ol to ul.
The problem now is that I would still love and want to change that image’s position from right to left (where would have been the numbered and ordedred numbers).

[PaulOB]

Hi,

Because you float the span (#toc span) then the list image is moved to the right because floats displace inline elements on the same line.

If you remove the float from #toc span then the list image will flip to the left. However it will have a dotted underline underneath it and it looks like you wanted to rub that out.

Therefore I suggest that you simply apply a background image to #toc span instead and remove the list-style-image which are troublesome at the best of times.

[Norman]

@PaulOB

Because you float the span (#toc span) then the list image is moved to the right because floats displace inline elements on the same line.

If you remove the float from #toc span then the list image will flip to the left.

Thank you a lot, PaulOB. Yes, now it is definitely better.