Fat Erik 5s Simple Pipe List

Author: Fat Erik 5

Comments: Horizontal pipe list, items separated with a pipe ("|"), using 'before' and 'first-child' pseudo selectors. Includes a workaround for IE browsers using border and negative margin values. In IE the LI's are shifted to the left using a negative margin value, this hides the first pipe.

Browser support chart

<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>

#navcontainer { margin-left: 30px; }

/*Fat Erik's Pipelist*/
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
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;

/*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 { border-left: 0; }

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.