list-display-image not working

  • I’ve done this command before on other websites with success, but I think I might be doing something wrong with this one.

    What I want is a basic inline list with bullet image of a small pear, png. Here’s what I have.

    <div id="navbar">
 <ul id="pagenav">
<li class="page_item page-item-14"><a href="/?page_id=14" title="Jason">Jason</a></li>
<li class="page_item page-item-16"><a href="/?page_id=16" title="Jennifer">Jennifer</a></li>
<li class="page_item page-item-6"><a href="/?page_id=6" title="Our Story">Our Story</a></li>
</ul></div>

    And the CSS:

    #pagenav , #pagenav li {
	margin:0;
	padding:18px 0 0 10px;
	display:inline;
	line-height:1em;
}

#pagenav a {
	color:#D8D8B1;
	display:inline-block;
	padding:5px;
	margin:0;
	text-decoration:none;
}

#pagenav a:hover,#pagenav a:active,#pagenav a:focus {
	text-decoration:underline;
}

#pagenav ul{
list-style-image:url(/images/pearicon.png);
}

    Thanks for any help you may have!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Yes you do ??

    You need:

    #pagenav ul li {
list-style-image:url(/images/pearicon.png);
}

    just missing li as ul is the placeholder for all of yours lists.

    This wasn’t quite a wordpress related question.

    Thread Starter mismatchedpear

    (@mismatchedpear)

    I have tried this, and it does not work on my website.

    Well if you want to check it out, https://www.mismatchedpear.com … I’m very confused and have tried many things, even creating a background image under LI imitating a bullet, and that didn’t work. The background displayed repeated, but disappeared completely when I added “no-repeat left center”.

    Thanks for your efforts, I do hope to get this to work!

    pearicon.png is not in your stylesheet, but peariconsmall2.png is. Try list-style-image with quotes around the URL:

    https://www.w3schools.com/Css/pr_list-style-image.asp

    It seems the code is not assigned to the list. It might be a matter of selectors. Try this:

    ul#pagenav li {
list-style-image:url(/images/pearicon.png);
}

    Also, make sure, that the image is uploaded in that folder.

    Thread Starter mismatchedpear

    (@mismatchedpear)

    Thanks guys.
    I am using peariconsmall2 in my stylesheet. In typing the code above I simply used pearicon.png as an example, but yes it’s in my css.

    Does the default Kubrick theme disable all LI bullets by default? Because when fooling around with it, I can’t even get the default bullet to display. So I’m thinking that somewhere else in the stylesheet there’s a command that effects LI bullet display.

    I think it might use css reset.

    In this case, you have to make sure that you are specific enough with selectors, but in your case you’ve been.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘list-display-image not working’ is closed to new replies.