list-style-image on an inline list?

hello-

so i was told by my web design teacher that i should code my navbar as a list, whether it is vertical or horizontal... i am using a horizontal navbar and want to use my own custom image as the bullets... but from my research (google) i think that you cannot use "list-style-image" on a list that has "display:inline"... is this true? how can i use my own image as bullets on a horizontal navbar?

my css
#navbar {
text-align: center;
font-size: 1.4em;
background: #cccccc url("../images/fade.gif");
background-repeat: repeat-x;
border: 2px outset #cc0000;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
height: 35px;
width: 80%;
}

#navbar ul {
list-style-image: url("../images/bullet.gif");
margin-left: 0;
margin-bottom: 0;
}

#navbar li {
display: inline;
margin-left: 10px;
margin-right: 10px;
}

my html
<div id="navbar">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="pictures.html">Pictures</a></li>
<li><a href="fun.html">Fun</a></li>
<li><a href="shops.html">Shops</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="sitemap.html">Site Map</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
thanks in advance for your help...

ps - i am coding to xhtml 1.0 strict

Instead of using "display: inline" you could use "float: left" on the <li>s...

I haven't tried this with bullets (or list-style-image) but I think it should work with a little padding. If it doesn't, you could always use a background image on the <li>s, too:


li {
float: left;
display: block;
width: 100px;
height: 25px;
padding-left: 10px; /* the width reserved for the background image */
background: url(bullet.gif) no-repeat 0px 10px; /* the "bullet"... adjust these numbers to taste */
}


Something like this should work. Hope this helps...

Some browsers (IE? Not sure here...) seem to ditch bullets on inline lists, including image based ones; as Richard indicated, you can always use background images to create bullets. This is the preferred method for normal lists as well, by the way, since there's more control over the images (if every list item is uniquely identified, you can even have a different bullet for each list item).

thanks to you both for your replies...

rmedek, your code works perfectly :thumbsup: thank you so much, i've got it exactly how i want it... didn't even occur to me to use background images :rolleyes: duh...

thanks again,
TheRoper

Glad I could help. :)

Sorry for bumping the generation old thread, but this thread got me to this site. :thumbsup:

So I was trying out the same method as mentioned in the thread and I seem to have a problem. I have a feeling that this has got nothing to do with the method itself but something else that I am missing.

On IE7 the top navigation bar is coming out very well. (see 2nd attached image)
On FF2 however, the background image of 'list item' and the 'link text' both are floating down. (see 1st attached image)

Please see the image.

HTML
<div id="rightcolumn">
<div id="topnav">
<div class="leftfloat">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="rightfloat">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>

CSS
#rightcolumn {
width:835px;
float:right;
background-color:#ffffff;
margin:0px;
padding:0px;
}

#topnav {
background-color:#4f6373;
width:835px;
height:22px;
background-image:url(../images/top-nav-right.gif);
background-position:right;
background-repeat:no-repeat;
margin:0px;
padding:0px;
}

div#topnav li {
float:left;
display:block;
width:80px;
height:22px;
padding:4px 0 0 21px;
background:url(../images/hex-bullet.gif) no-repeat 0 0px;
}

.leftfloat {
float:left;
margin:0px;
padding:0px;
}

.rightfloat {
float:right;
margin:0px;
padding:0px;
}

.leftfloat ul, .rightfloat ul {
margin:0;
padding:0;
}
See if that helps any.

Thanks a lot aerospace_eng.
I virtually set margin and padding to 0 to everything except that. :P
Works like a charm.
I would have repped you but I am in grey so wouldnt matter.

Thanks a lot aerospace_eng.
I virtually set margin and padding to 0 to everything except that. :P
Works like a charm.

A little tip. Instead of setting margin and padding to 0 on every element in your stylesheet, just put this:

* {
margin: 0;
padding: 0;
}

That will remove all default margin and padding and it will be a lot easier to code things. And it results in a lot less code, because with this you've declared a zero margin and padding only once.

Thanks thats extremely helpful!!