Can't get list to use my bullet image when inline

A Breadcrumb example

[Fotiman]

I'm trying to create a breadcrumb that looks something like this (but using an image in place of ">"):

Home > Level 1 > Sub Level 2

The HTML is simple:

<div id="breadcrumbs"> 
 <ul> 
 <li class="first">Home</li> 
 <li>Level 1</li> 
 <li>Sub Level 2</li> 
 </ul> 
</div>

The CSS for this is simple too:

#breadcrumbs ul 
{ 
 margin-left: 0; 
 padding-left: 0; 
 display: inline; 
 border: none; 
 list-style: disc url(/images/bcseparator.gif) inside; 
} 
#breadcrumbs ul li 
{ 
 margin-left: 0; 
 padding-left: 0; 
 border: none; 
 display: inline; 
}

The above displays like this:

Home Level 1 Sub Level 2

If I remove the "display: inline;" rule from the li, then I see my image but it displays more like this:

> Home
> Level 1
> Sub Level 2

What can I do to get my image to show up when the list item is inline?

Thanks.

[DrDoc]

I don't think there's much you can do. When inline (or floated) the bullets seem to not show up regardless of what you do.

You can always use ::before though, I guess ...

By the way, while we're at it. If you are using a list for a breadcrumb trail, isn't this rather the structure you should use, since each level is a sub of the previous:

<div id="breadcrumbs"> 
 <ul> 
  <li class="first">Home 
   <ul> 
    <li>Level 1 
     <ul> 
      <li>Sub Level 2</li> 
     </ul> 
    </li> 
   </ul> 
  </li> 
 </ul> 
</div>

[benihana]

Try using a background-image and some padding.

[Fotiman]

DrDoc:
Yes, technically speaking, the more structured list would be correct. The end result should be that it displays the same way for either approach, and to keep my example short, I used the abbreviated version.

benihana:
The down side to that approach is that the "marker" (background image) won't show up when printed.

I was hoping I was just doing something wrong, but it looks like this is either by design, or browsers just don't support it. :(

[DrDoc]

Use ::before then, and patch IE to support it. :)