problem with list-bullets and inline display

[olaf]

Hallo,
i ' m busy with a horizontal bar for navigation. I'm using CSS and unordered list. My bar looks fine but the selected list images will not show. My style:

<style type="text/css">
<!--
#nav1{
    position: absolute;
    left: 25px;
    top: 120px;
}
#nav1 ul {
text-align: center;
margin-left: 0;
padding-left: 0;
}
#nav1 li {
    padding: 3px 10px;
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    list-style-image: url(images/red_bullet.gif);
    list-style-position: inside;
    list-style-type: none;
}
-->
</style> 

The link is ok, i checked this while disabling "display: inline".
Please help me, what wrong?

[Sam]

setting li's to display:inline negate's ul list-style's. try setting them to float:left instead

[olaf]

Thanks for your answer. But it works not in IE. Is there way to handle this in IE?

This works (only) in mozilla:

#nav1 ul li:before {
content: "\0020 \0020 \0020 \00BB \0020";
color: #CC0000;
}

[ronaldb66]

You could emulate the effect by using the image as background image (no-repeat, position left center) on the list items and move the content away with some left padding.
MaxDesign's Listurorial shows in detail how to go about this.

[Fang]

As suggested by ronaldb66:

#nav1 li {
padding: 3px 10px;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background:url(images/red_bullet.gif) left no-repeat;
}

:before is not supported by IE

[olaf]

bedankt,

this works really goed.

Is there a way to use characters in case of images?
(a way that will show au in IE)

[Fang]

Not with css, use entities in a span:
<span style="color:red;">& nbsp;& nbsp;& nbsp;& raquo;& nbsp;</span> (remove spaces)
The first three spaces can be achieved by altering the padding-left of the li

[olaf]

Ok,

but i have to place this entities before each item, or not?

[David Harrison]

Just do this:

<li>
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;raquo;&amp;nbsp;<a href="blah.html">Blah</a>
</li>

Then colour the text in your li's whatever you want and the same for the text in your links.

Edit: Fang, just type &amp;amp;nbsp; in if you want to show &amp;nbsp;

[olaf]

Hmmmm...

I like Fang's solution (dankje wel).