List-style-image not working - any ideas?

HTML & CSS
1

Hi guys,

Can anyone spot what I’ve done wrong.
The menu displays fine cross browser but I just can’t get the custom list image to show up.

Strangely the list image shows up if I change
.subnav li to li.subnav

But then the menu becomes vertical instead of horizontal. :confused:

ul.subnav {
    float: left;
	padding:0px;
    margin:0px;
	list-style-type:square;
	list-style-image:url(images/bullet_w.gif);
}

.subnav li {
display:inline;	
margin:0px 25px 0px 0px;
}

.subnav a:link, .subnav a:visited {
text-decoration:none;
color:#DFEEF7;
}

.subnav a:hover {
color:#fff;
text-decoration:underline;
}

Any help would be greatly received! thanks in advance

2

Hi,

If you float the list item instead of making it display:inline the list image should show.

It won’t work in ie6/7 though as they lose the image/marker if a list is floated.

Therefore you would be better off using a background image on the list element instead (not the ul) of a list image which you will then have more control over.

3

In order for list-style-image to work it has to be list-item display, display:inline; won’t show it. You could place it as a background iamge though.

IE6/7 automatically make floated items block level though, so use a bg image instead.

Also, .subnav li targets <li> that has a PARENT class of “subnav”

li.subnav targets a <li> that has a class “subnav”

Post your HTML and we can ge this sorted-sounds ike your just targeting the wrong elements.

Edit:

Paul beat me to it

4

Hi guys, thanks for your replies.

It’s strange as I’ve never experienced this issue before.
However CSS menus aren’t my strong point so it’s likely I have done something quite stupid.

The HTML is pretty basic.

Just:

<ul class=“subnav”>
<li><a href=“#”>1</a></li>
<li><a href=“#”>2</a></li>
<li><a href=“#”>3</a></li>
<li><a href=“#”>4</a></li>
<li><a href=“#”>5</a></li>
<li><a href=“#”>6</a></li>
</ul>

I need to use class rather than an ID as another menu operates on the same page with identical styling.

Once again thanks for your help.

5

Try this out. I used background-image as the reason specified above.

ul.subnav {
    float: left;
    padding:0px;
    margin:0px;
    background-image:url(images/bullet_w.gif);
}

.subnav li {
float:left;
margin:0px 25px 0px 0px;
}

.subnav a:link, .subnav a:visited {
text-decoration:none;
color:#DFEEF7;
}

.subnav a:hover {
color:#fff;
text-decoration:underline;
}
6

Hi Ryan,

Thanks for your quick reply.

Unfortunately the solution you’ve suggested above won’t work for me as this would create a background image for the UL and not the individual list items.

I’ve created something like the following based on yours and Paul’s idea:

ul.subnav {
float: left;
padding:0px;
margin:0px;

}

.subnav li {
display:inline;
margin:0px 21px 0px 0px;
background-image:url(images/bullet_w.gif);
background-repeat:no-repeat;
background-position:left;
padding-left:14px;
}

It seems to work cross-browser as well. Thanks for the tip guys!

7

Ah yes I don’t know what I was thinking :). Sorry about tha tlol.
Glad you found a fix ;).