2 replies [Last post]
Last seen: 14 years 12 weeks ago
Joined: 2007-08-15
Posts: 1
Points: 0

I am working on a Joomla site for a church. I have never had this issue arise before, so I'm really stumped!! :?

I have my style sheet to include an image for my UL lists -

ul {
        margin: 0;
        padding: 0;
        list-style: none;
li {
        line-height: 18px;
        padding-left: 15px;
        padding-top: 0px;
        background-image: url(../images/dot.gif) ;
        background-repeat: no-repeat;
        background-position: 0px 4px;

When I added an article that needed a numbered list (ol), I found that it was inheriting the image from the ul - li.

I tried using the built in css modifier in the TinyMce Editor - assigning that ol (ordered list) with the class of decimal thinking that would solve it, to no avail. Then I went into my style sheet and added the following to further reinforce no image was to appear in ol (ordered lists)

li.decimal {
        line-height: 18px;
        padding-left: 15px;
        padding-top: 0px;

I still have an image in my ordered list.. and I'm growing balder by the moment. Here is a the page in question - can someone show me what I've done incorrectly or how I can correct this issue. I'm hoping to solve it permanently in the style sheet as folks that are not html or css literate will adding content. I want them to be able to just grab the ordered list icon in the tool bar and have it pick up the correct style.

Thanks so much for your help.


wolfcry911's picture
Last seen: 8 years 39 weeks ago
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

ol li {background-image:

ol li {background-image: none;}

edit// I see that you tried that with this:

ol.li {
        line-height: 18px;
        padding-left: 15px;
        padding-top: 0px;
        background-image: none;
but notice your error. You're targeting an ordered list with a class of li. Remove the dot.

MikePixel's picture
Everett, WA
Last seen: 8 years 23 weeks ago
Everett, WA
Timezone: GMT-7
Joined: 2008-06-20
Posts: 91
Points: 8

Yuppers. Both ordered lists

Yuppers. Both ordered lists and unordered lists have the

  • element in them, so when you styled for just the
  • it worked for both ordered and unorderd.
  • The way Wolfcry did it was to specify no background image for just the

  • elements that belong to an ordered list.