Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] Images as bullets in unordered lists - Please help


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 26, 2012, 07:34 PM
deuxetoiles
 
44 posts · Dec 2009
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)
  #2  
Old Mar 26, 2012, 08:43 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Mar 26, 2012, 09:20 PM
deuxetoiles
 
44 posts · Dec 2009
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] unordered list bullets and photo wrap GrahamW Center area post/pages 2 Sep 4, 2011 11:16 AM
[SOLVED] Ordered and Unordered Lists Overlapping with Pictures GreenEcoChick Page & Category Menu Bars 2 Oct 12, 2010 10:41 AM
Adjusted $allowedtags in kses.php - still no ordered/unordered lists show in comments eraccusa Comments, trackbacks & pings 12 Oct 3, 2010 01:39 PM
[SOLVED] Ordered lists &amp; unordered lists overlapping neighboring pictures Smilesbypayet Customization, Design, Programming... 2 Oct 13, 2009 07:33 PM


All times are GMT -6. The time now is 03:05 PM.


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