Bullet images for a specific unordered list

Hi there :)

So I'm a bit of a newbie at html/css but I've managed to format my entire sales page page by myself: http://www.thelovevitamin.com/ultimate-secrets-to-acne-freedom/

I'm on the very last task that I need to do for the page, and it's been kicking my *** for the last 3 to 4 hours. I've tried all sorts of things, but for the life of me, I cannot figure it out.

What I want to do is this: I want to replace the bullet points on the last list on the page (the one that says "YES I want to clear my skin, YES i want to change my life, etc) with a different image than the other ones. I want it to be a checkmark.

Here is the url of the checkmark I want to use: http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg

The css code that I used for formatting the other bullet point images was this:

body.pageid-1361 div#wrapper ul li {

margin:0;
padding: 15px;
list-style:none;
background-image:url(http://www.thelovevitamin.com/wp-content/uploads/2011/09/favicon1.ico);
background-repeat:no-repeat;
background-position:left center;
padding-left:50px;
padding-right:50px;

}

I assume this is overriding something.

Here is the html for the list I want to change the bullet points on:

<ul class="navlist">
<li style="text-align: left;">Yes, I want to learn the secrets of permanently clear skin</li>
<li style="text-align: left;">Yes, I want to change my life for the better</li>
<li style="text-align: left;">Yes, I want to improve my self esteem and happiness</li>
<li style="text-align: left;">Yes, I want to GET RID OF MY ACNE ONCE AND FOR ALL!</li>
</ul>


...... please tell me what it is I do I need to do to make this work.

I've tried so many things. :( Please let me know if you need more information about what I've already tried. I'm using headway theme if that makes any difference to you.

Hi,

you have to create a different class for this new style of bullet/image.

something like:

css part:
[code]

.checkedbox {
background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
background-size:9%;
background-repeat:no-repeat;
padding:0 0 0 33px;
line-height:33px;
}

[\code]

html part:
[code]
<ul class="navlist">
<li style="text-align: left;" class="checkedbox"> Yes, I want to learn the secrets of permanently clear skin</li>
<li style="text-align: left;" class="checkedbox"> Yes, I want to change my life for the better</li>
<li style="text-align: left;" class="checkedbox"> Yes, I want to improve my self esteem and happiness</li>
<li style="text-align: left;" class="checkedbox"> Yes, I want to GET RID OF MY ACNE ONCE AND FOR ALL!</li>
</ul>
[\code]

Oh you are awesome. That is definitely the closest I've gotten so far. But it still needs a little work.

My code is now this:

body.pageid-1361 .checkedbox {
background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
background-size:50%;
background-repeat:no-repeat;
padding:0 0 0 33px;
line-height:33px;
}

html:

<ul class="checkedbox">
<li style="text-align: left;">Yes, I want to learn the secrets of permanently clear skin</li>
<li style="text-align: left;">Yes, I want to change my life for the better</li>
<li style="text-align: left;">Yes, I want to improve my self esteem and happiness</li>
<li style="text-align: left;">Yes, I want to GET RID OF MY ACNE ONCE AND FOR ALL!</li>
</ul>

and now it looks like this:

http://www.thelovevitamin.com/ultimate-secrets-to-acne-freedom/

Now... how do I get the checkmark on the other list items, and remove the little green heart things without messing up all my other list bullets?

You've set the checkmark to appear as the background on your ul element - it needs to be on the li element as sac suggests. As it stands, you are applying a background image to both the ul and li elements.

If your html has the checkedbox class on the ul element, then your css needs to be:

body.pageid-1361 #wrapper .checkedbox li{
background-image:url(http://www.thelovevitamin.com/wp-con...ll-check.jpg);
}


Now this css will replace your other background image on the li.

I'd suggest leaving the class on the ul element as less markup is needed this way.

You'll need to resize your checked box image as well.

try to separate the 2 css rules:
[code]

body.pageid-1361 div#wrapper ul li {

margin:0;
padding: 15px;
list-style:none;
background-image:url(http://www.thelovevitamin.com/wp-con...favicon1.ico);
background-repeat:no-repeat;
background-position:left center;
padding-left:50px;
padding-right:50px;
}

.checkedbox {
background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
background-size:9%;
background-repeat:no-repeat;
padding:0 0 0 33px;
line-height:33px;
}
[\code]

I personally wouldn't rely on background-size as it is not supported in IE8 or less, or FF3 or Safari4.

Thank you for your help!

I did this:


body.pageid-1361 div#wrapper ul li {

margin:0;
padding: 15px;
list-style:none;
background-image:url(http://www.thelovevitamin.com/wp-content/uploads/2011/09/favicon1.ico);
background-repeat:no-repeat;
background-position:left center;
padding-left:50px;
padding-right:50px;

}

body.pageid-1361 .checkedbox li {
background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
background-size:50%;
background-repeat:no-repeat;
padding:0 0 0 33px;
line-height:33px;
}

But it did this: http://www.thelovevitamin.com/ultimate-secrets-to-acne-freedom/

Also... about resizing my image... I had already resized it so that the actual size was the size that I wanted, as seen here: http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg

But when it inserted itself, it was warped to be huge... so I scaled it down to 50 percent and that's when it looked normal! So what should I do about that.... scaling it down with background-size isn't a good idea?

Hey guys.. sorry for being so daft - I went back and realized I had missed a bunch of stuff in your suggestions. So I corrected it and I managed to get it to work!

Thank you SO MUCH for your help!! :)