Welcome to WebmasterWorld Guest from 54.211.17.91

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!

   
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!
4:28 pm on Jun 24, 2013 (gmt 0)

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



Welcome to WebmasterWorld!

When you inspect the
li
-- is the image not showing because it's somehow hidden, or because it hasn't loaded?
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?
5:52 pm on Jun 24, 2013 (gmt 0)

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



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.