List item bullets not showing

The white section under the page logo banner.

With the css code below I want my list items to display a graphic for the bullets.

I can’t figure out why they don’t show. If I remove the display:inline, the bullets show but the list is then centered and the list items don’t wrap.

I can I get the list items to display the bullets, but wrap as if I used a float:left or something. (I tried using it, but that just cause more problems :confused: ).

#navMain ul, #navSupp ul, #navCatTabs ul {
	margin: 0;
	padding: 0.5em 0em;
	/*list-style-type: none;*/
	text-align: center;
	line-height: 1em;}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;}

#navCatTabs ul li {padding-left: 0.7em; line-height: 1.5em; list-style-image:url(../images/flower-artistic.png);}

#navCatTabs ul li a:link, #navCatTabs ul li a:visited {
    color: #603;}
#navCatTabs ul li a:active, #navCatTabs ul li a:hover {
     color: #fc3;
     background-color: #603;

Thanks for any help. I bet it’s something simple.

The padding-left of the unordered list is set to 0. That way the bullet is not shown if the bullet is positioned outside.


Inline display will normally hide the bullets, and list-style-image is buggy cross browser anyway. Best way would be to add a little more left padding to the <li> and set the image as a non-repeating background image to the <li>.

Thanks so much Centauri. Your help worked wonders.