CSS Ordered List Problem

I have an ordered list that I am trying to mark up the HTML can be seen below:

<ol class="main tags">
    <li class="main">Gump...</li>
    <li>We ar...</li>
    <li>We a...</li>
</ol>

The CSS looks like this:

ol.tags {
    list-style: decimal  none o开发者_Python百科utside;    
}

ol.tags li {
    background: transparent url(../images/tag.jpg) no-repeat;
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 16px 0px 0px 60px;
}

And the result looks like this:

http://gumpshen.com/images/temp/Gumpshen_OL.png

I want to have the numbers appear cenetered inside the white "tabs", can anyone help please?

Hey Burt, what Sortiris is pointing out is where your order list has a kind of running repeating background see an good explanation here : http://codeasily.com/css/style-ordered-list

I have tried to do what you are talking about but I fear it may not be possible, without custom numbers or markers.

You are on the right track however but I would make the ol list style inside, then you still have to figure out a way to push the order list number away from the list content.

It looks like you will want to add your own counter to your list.

you can use the

background: transparent url(../images/tag.jpg) no-repeat; for ol.tags, not for ol.tags li

One option might be to make your white square image larger, so it's as tall as the height you want your li's to be. Then make it the background of the ol instead of the li, and make it repeat in the y-direction.

Another option would be to switch the ol to have a style of inside as mentioned before, and then stick a span inside your li with some padding-left to position it where you want.

Edit: by making the white square image larger, I mean adding transparent "padding", or something that matches the background of the page. So the image has larger dimensions, but the white area remains the same.

Sorted it here is what I done:

First I added a span tag around the content:

<ol class="main tags">
    <li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
    <li><span>We are web design & development studio who are passionate about what we do.</span></li>
    <li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>

The I was moved the decimals to inside as suggested by joelt (thanks Joe) and was finally able to shift stuff around using minus margins on the span tags:

ol.tags {
    list-style: decimal  none inside;

}

ol.tags li {
    background: transparent url(../images/tag.jpg) no-repeat;    
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 26px 0px 0px 20px;
}

ol.tags li span {    
    margin: -24px 0px 0px 50px;
    display: block;
}