taming lists

Can anyone please tell me why this code wont work properly.

Untitled

#h-contain {
border: 1px solid #000;
margin-bottom: 25px;
padding: 5px;
}

#pipe ul {
margin-left: 0em;
padding-left: 0px;
display: inline;
color:blue;
}

#pipe ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}

#pipe ul li.first {
margin-left:0;
border-left:none;
list-style:none;
display:inline;
}

• Item 1


• Item 2


• Item 3


• Item 4

Its supposed to be a horizontal list but for some reason the PIPE id selector in the css is not being applied to the markup, indeed none of the css is being applied to the list. If i remove all the id's for the list from both the css and html it works fine, but for the life of me i cant figure out why it wont work like this. It validates fine.

the code was taken from http://www.alistapart.com/articles/taminglists/

Thanx in advance