<li> problem :: How to make appear list-style-image while choosing display:inline

[sayamish]

Dear all CSS experts,
I'm stuck in one problem. I'm not being able to make image appear[list-style-image] while choosing display:inline for horizontal menu. It works fine if I use display default.
Here's my css :
#bottom_links ul
{
margin:0px;
padding:0px;
}
#bottom_links li
{
list-style-image:url(../images/bottom_link_arrow.gif);
display:inline;
}
Here's my html :

<div id="bottom_links">
<ul><li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sevices</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sevices</a></li>
</ul>
</div>




Please send me a solution. Thanks in advance.
Sayamish

[Monie]

please send us the screen shot or better host it somewhere so we can see it.

cheers..

[trandrus]

Why don't you just add the image as a background and apply left padding? This gives you greater control anyways.

Code: Select all

//css
#h-list li {
    float:left;
    display:inline;
    background:url('[path to image]') top left no-repeat;
    padding-left:[width of image]px;    
}

//html
<ul id="h-list">
    <li>1</li>
    <li>2</li>
    //etc.
</ul>

Remember that display:inline; will cause the <li> to lose its block components like height, so you will be unable to force the height to fit the image. Also remember that background image position should be specified in the url declaration.