Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   [SOLVED] Images as bullets in unordered lists - Please help (http://forum.bytesforall.com/showthread.php?t=17131)

deuxetoiles Mar 26, 2012 07:34 PM

[SOLVED] Images as bullets in unordered lists - Please help
 
Okay, it's time to stop banging my head against this and ask for help. What am I doing wrong here?

I am trying to style a class of unordered list to use a small graphic instead of a bullet. I combed the forums and read up on various css tutorials and despite my best efforts, it's not working.

Here's what I have put into CSS/HTML inserts:

Code:

ul.checklist {
  margin: 0;
  padding: 0;
  list-style-type: none !important;
}

ul.checklist li {
  margin: 10px;
  padding-left: 18px;
  background: url(/wp-content/uploads/2012/03/checkbullet.png) no-repeat top left !important;
  display: list-item !important;
}


And here's the html I am using on the page:
HTML Code:

<ul class="checklist">
<li><strong>Are you <em>widowed, separated or divorced</em></strong> and want to start over, but not sure how?</li>
<li>Do you keep finding the <em>same kind of unhealthy Partners</em> over and over again?</li>
<li>Do you find a “Perfect Partner”, only to find out later, they’re NOT who you thought?</li>
<li><strong>Are you</strong><strong> </strong><em>disillusioned</em> and wondering if there is really anyone out there <em>for you? </em></li>
</ul>

All the styling except the the graphic bullet seems to be applying. I have checked the url, tried the full path vs. the shortened one, tried it surrounded by single quotes and without. I imagine it's my poor CSS skills that are tripping me up. All help is appreciated!

URL=http://dreampartner.acenter4growth.com
WordPress=3.3.1
Atahualpa=3.7.3 (plus patches)

lmilesw Mar 26, 2012 08:43 PM

I am not sure what is going on. I tried the following and it worked for me in Firebug
HTML Code:

ul.checklist li {
    margin: 10px;
    background: url("http://dreampartner.acenter4growth.com/wp-content/uploads/2012/03/checkbullet.png") no-repeat top left;
    padding-left: 18px;
}


deuxetoiles Mar 26, 2012 09:20 PM

Well, gee, I dunno! Your code works fine for me too!

I guess it was the double quotes, because that's the only difference I can see.

Thank you very much.


All times are GMT -6. The time now is 11:40 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.