Author: Fat Erik
Comment: Horizontal breadcrumbs navigation list, items separated with a ">", using 'before' and 'first-child' pseudo selectors. Includes a workaround for IE browsers using a background image and negative margin values. In IE the LI's are shifted to the left using a negative margin value, this hides the first ">".
Browser support chart
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navcontainer { margin-left: 30px; }
/*Fat Erik's Breadcrumbs*/
#navlist
{
list-style: none;
padding: 0;
margin: 0;
}
#navlist li
{
display: inline;
padding: 0;
margin: 0;
}
#navlist li:before { content: "> "; }
#navlist li:first-child:before { content: ""; }
/*IE workaround*/
/*All IE browsers*/
* html #navlist li
{
background-image: url("images/gt.gif");
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0.5em 0 1em;
margin: 0 1em 0 -1em;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist { height: 1%; }
* html #navlist li
{
display: block;
float: left;
}
/*End hide*/
/*Mac IE 5*/
* html #navlist li:first-child { background-image: none; }
ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could
work on Listamatic's simple list model. When in doubt, use the external
resource first, or at least compare both models to see which one suits your needs.