Running a bit late on this one, but here is an alternative to your code:

Code:
  
<div id="crumbTrail">
<ul>
<li><a href="#" title="mira Help">mira Help</a></li>
<li><a href="#" title="Discover mira">Discover mira</a></li>
<li><a href="#" title="Options">Options</a></li>
<li class="current"><a href="#" title="Unique Settings">Unique Settings</a></li>
</ul>
</div>



While it adds an extra 2 lines, it trims up the code considerably, removing extraneous spans, divs, classes, and spaces. It also looks orderly when not styled.

The CSS:
Code:

body { margin: 0; padding: 0; } /* Necessary for IE to display the bar at the absolute top left of the page */
#crumbTrail { color: #444444; font-size: 12px; font-weight: bold; background: url(crumbtrailbackground.png) repeat-x; position: fixed; top: 0; left: 0; width: 100%; height: 27px; }
#crumbTrail ul { min-width: 1000px; margin: 0; padding: 0; list-style-type: none; }
#crumbTrail li { line-height: 26px; background-image: url(crumbLeft.jpg); background-repeat: no-repeat; background-position: 0 0; height: 26px; float: left; }
#crumbTrail a:link, #crumbTrail2 a:visited { color: #f0f0f0; font-family: Verdana, sans-serif; text-decoration: none; text-shadow: #444444 0px -1px; background-image: url(crumbRight.jpg); background-repeat: no-repeat; background-position: right 0; padding-right: 15px; padding-left: 15px; cursor: pointer; display: block; }
#crumbTrail a:hover { color: #fff; text-decoration: none; text-shadow: #666666 0px -1px ; }
#crumbTrail li.current { background-image: url(crumbLeftCurrent.jpg); }
#crumbTrail li.current a { background-image: url(crumbRightCurrent.jpg) !important; } /* the !important is crucial for IE to display correctly */



As you can see, I have reduced the amount of images from 6 to 4 (attached). I have also converted them to .jpgs rather than .png, since IE doesn't support .png transparency.

Concerning IE, I had to add a couple bits of extra code in order to make it obey (hacks are commented). IE also doesn't support min-width, but there's not an easy way around that in this situation.

A couple of suggestions: you may want to define font styles and sizes. Safari substitutes a nice looking font at a decent size, but Windows-based browsers default to Times Roman. Also, in order to be compliant, you should add titles to your a tags (as seen above).


Attachments
280865-images.zip (62 downloads)