homepage Welcome to WebmasterWorld Guest from 23.23.9.5
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
list-style-image not showing
If there's a better way to do this I'm open to it!
mint_tea



 
Msg#: 4587170 posted 4:23 pm on Jun 24, 2013 (gmt 0)

Hey Guys! I'd like to insert an image in place of a bullet, but it's not showing up at all. I get the feeling that list-style-image is not the preferred method of doing this, and I'm definitely open to suggestions.

HTML:


<div id='menu'>
<ul>
<li id="a"><a href="about.html">About</a></li>
<li id="b"><a href="flavors.html">Philosophy</a></li>
<li id="c"><a href="flavors.html">Flavors</a></li>
<li id="d"><a href="coffee.html">Coffee</a></li>
<li id="e"><a href="history.html">History</a></li>
<li id="f"><a href="news/index.html">News</a></li>
<li id="g"><a href="contact.html">Contact</a> </li>
</ul>
</div>


CSS:

#menu ul{
list-style-type: none;
list-style-image: url('images/scoop.png');
list-style-position: outside;
padding: 0% 20% 0%;
margin: 0% 2% 0%;
}

I heartily appreciate y'all's help!

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4587170 posted 4:28 pm on Jun 24, 2013 (gmt 0)

Welcome to WebmasterWorld!

When you inspect the
li -- is the image not showing because it's somehow hidden, or because it hasn't loaded?
mint_tea



 
Msg#: 4587170 posted 5:04 pm on Jun 24, 2013 (gmt 0)

Hi DrDoc, thanks for the welcome and the help!

When I inspect the element, The rule isn't crossed out--so it appears as though some other rule isn't overriding it. It doesn't seem to be a loading issue as other elements aren't 'making room' for the would-be bullets. When you mean hidden, do you mean that it's behind other elements?

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4587170 posted 5:52 pm on Jun 24, 2013 (gmt 0)

Yes, by "hidden" I mean that other elements are overlapping.

As for loading issue -- other elements do not need to make room, since the image is part of the
li, albeit rendered on its outside. When you inspect the element you can mouse over the background rule. If the image appears in a preview, it has loaded fine. If not, the path may need updating.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved