homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

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




msg:4587172
 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




msg:4587174
 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:4587187
 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




msg:4587208
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved