The whole navigation bar is made up of a bunch of div and spans. Essentially the main bar which goes accross the whole screen is the parent div. Each of the lighter grey pill shapes is an anchor surrounding a div which specifies the body of the pill, then a span for the left rounded cap, then the text, then a span for the right, etc... The last pill is essentially the same without the outside anchor. I had to do a little "cheating" by including a non-breaking space inside each span for the end caps.

That's a lot of nested properties, but I tried setting all kinds of combinations of no-wrap with no effect. My first thought was that I'd only need it on the top-level div as long as I didn't override it within a child. I suppose I can post the relevant HTML and CSS (I can't upload the files in their entirety to the board as the software hasn't been released yet.

Remember, what's below now works because of the MIN-WIDTH:1000px in the crumbTrail definition. Remove that entry to see the wrapping behavior (and regardless, a total mess in Firefox, etc...)

Code:

---

<div id="crumbTrail">

	<a href="../../mira Help.html" ><div id="crumbPrevious"><span id="crumbLeft">&nbsp;</span>mira Help<span id="crumbRight">&nbsp;</span></div></a>

	<a href="../discover.html" ><div id="crumbPrevious"><span id="crumbLeft">&nbsp;</span>Discover mira<span id="crumbRight">&nbsp;</span></div></a>

	<a href="../discover.html#OptionsTab" ><div id="crumbPrevious"><span id="crumbLeft">&nbsp;</span>Options<span id="crumbRight">&nbsp;</span></div></a>

	<div id="crumbCurrent"><span id="crumbLeft">&nbsp;</span>Unique Settings<span id="crumbRight">&nbsp;</span></div>

</div>

---

And the CSS...

Code:

---

#crumbTrail      { color: #444444; font-size: 12px; font-weight: bold; background: url(../images/crumbtrailbackground.png) repeat-x; position: fixed; top: 0; left: 0; width: 100%; height: 27px ; min-width: 1000px; cursor: default; }

#crumbTrail a  {  color: #f0f0f0; text-decoration: none;  text-shadow: #444444  0px -1px; }

#crumbTrail a:hover { color: white; text-decoration: none; text-shadow: #666666 0px -1px ; }

#crumbPrevious       { background-image: url(../images/crumbPrevious.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; float: left; padding-top: 5px; padding-bottom: 27px; }

#crumbCurrent       { color: #f0f0f0; background-image: url(../images/crumbCurrent.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; float: left; padding-top: 5px; padding-bottom: 27px; text-shadow: #444444  0px -1px; }

#crumbLeft      { background: url(../images/crumbLeft.png) no-repeat; position: relative; top: -5px; float: left; padding-left: 11px; padding-bottom: inherit; }

#crumbRight    { background: url(../images/crumbRight.png) no-repeat; position: relative; top: -5px; float: right; padding-right: 6px; padding-bottom: inherit; }

---

The referenced graphics are all attached to this post in a zip file.