<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="#">asdasdf</a></li>
<li>asdasdf</li><li>asdasdf</li></ul>
</div>

[markbrown4]

Hello, and welcome to Sitepoint

It's nearly always better to use background images rather than list-style-image as they are positioned much more consistently cross-browser, I float the li items so that they are block level and are easier to control. We just give the element a little left padding as well to move it out of the way of the background image.

<ul id="bottom_links">
  <li><a href="#">asdasdf</a></li>
  <li>asdasdf</li><li>asdasdf</li>
</ul>

#bottom_links {
  margin:0;
  padding:0;
  list-style: none;
}
#bottom_links li {
  float: left;
  background-image:url(../images/bottom_link_arrow.gif) no-repeat 0 0;
  padding-left: 10px;
}

Hope it helps

[Paul O'B]

Hi

When you make the list display:inline the it is no longer display:list-item and therefore list images and bullets won't apply to it.

See my post below for a thorough explanation and solution.

http://www.sitepoint.com/forums/show...99#post3580799

Or use a background image as mark suggests above

[sayamish]

Thanx yellowshoe,

That trick worked well for me. Thanx for that. However, I'm wondering how come css not being able to work display:inline and list-style-image:url (""); together ......

Thanx again.

Sayamish

[markbrown4]

Paul said the reason why above, when you set a li element to display inline you lose it's list-like properties, as list-style-image sets the 'bullet' to an image it can't be seen because an inline element doesn't have 'bullets' only list-item's have bullets.

In any case - the browsers render a background image much more accurately so should always be used instead.

[sayamish]

Thanx for ur helpful updates.