Breadcrumb list issue in IE

[JPSzcz]

I am having an issue with a ul based breadcrumb. The caret that is used as a delimiter is a background graphic.

In IE ,when a line item wraps in the breadcrumb, the caret for that line item disappears. This only happens in IE. I did some investigating, and if I leave the font-family property at its default setting, or as serif, the wrapped list item works fine, but as soon as I define some other font, the caret dissapears.

I have created a test page that you can see at:
http://www.theworkshopproject.com/breadcrumb_only.html

The first breadcrumb example does not have a font assigned to it and it works. the second breadcrumb example has the font arial assigned to it, so the wrapped items' caret dissappear.

Here is the CSS---
<style type="text/css" media="screen">

/* --- Document Elements --- */
body { background: #FFFFFF; color: #666666; margin: 0px 0px 15px 0px; }

.navbreadcrumb { clear:both; width: 760px; margin: 0 auto; text-align: left; padding: 0px 0px 10px 0px; background-color: #ffffff;}
.navbreadcrumb ul { list-style-type: none; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 17px; }
.navbreadcrumb li { display: inline; background: url(/images/breadcrumb.gif) no-repeat 5px 5px; font-size: 12px; font-weight: bold; padding: 0px 0px 0px 15px; }
.navbreadcrumb li.start { background: none; padding: 0px 0px 0px 0px;}
.navbreadcrumb li a { font-weight: normal; }

</style>

I am open to anyone's thoughts on this.

Thanks in advance,
JPS

[cydewaze]

Strange. The > disppears in both examples in both IE for me. It's there in FF though.

[figbeam]

Well, it's not the font family. Try to make the div .navbreadcrumb 10px narrower so the list items will wrap in both divs. You'll see that the picture disappears in both.

I'm going to mess around with it for a while and see if I get somewhere. I have a feeling that the image is really outside the .navbreadcrumb div's left edge. Inline elements are wonderful but weird entities and strange things happen when they wrap.

...
...

No, couldn't get it to work. Maybe you could use the image in the foreground instead. It's a bit more code but it works. Haven't tried using :before, and I'm not sure if IE understands that...

[JPSzcz]

Maybe you could use the image in the foreground instead. It's a bit more code but it works. Haven't tried using :before, and I'm not sure if IE understands that...

Figbeam -

What do you mean by foreground? I can get the ">" image to show up if I just insert it inline as an <img> element. Is that what you mean?

JPS
===========================

[figbeam]

Yes, that's it.