list-style-image not showing

Forum Moderators: not2easy

Message Too Old, No Replies

list-style-image not showing

If there's a better way to do this I'm open to it!

mint_tea

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

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

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

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.