Hey ironfenix,
I’ve had to do that in the past for a few sites and I tackled it a little differently. Rather than using a pipe ‘|’ I would use CSS and utilising a
border-right:1px solid #fff; substituting #fff with whatever colour you want.
You’ll still get the same result with an extra one at the end so you can either use something like #menu li:last-child { border-right:0; } and that’ll get rid of the last one in some browsers.
Some versions of IE don’t recognise the :last-child pseudo class.
You might need to add some jQuery if you need to deal with that. Something like:
jQuery(document).ready(function($) {
jQuery("#nav li:last").css({'border-right':0});
});
Should deal with it I think 🙂
Brilliant why didn’t think of the simple things first ha!
However if anyone else is stuck with this, heres the solution thats browser friendly without jquery:
li {
list-style-type: none;
display:inline;
border-left:1px solid #000000;
}
li:first-child {
border-left: 0;
}
As IE 7+/ Opera / Safari / Chrome / FireFox all support first-child but don’t support last-child.
Thanks Bronson
Ahh nice thinking on the first-child idea! 🙂
No worries. Happy to help!
@ironfenix,
Thanks a bunch for that bit of info on IE 7+/ Opera / Safari / Chrome / FireFox support of first-child. I thought I was crazy when I couldn’t get last child to work, ha ha ha!
Thanks man. -c-
Jim
(@jamesabegglen)
@ironfenix
Thanks for the fix. I’ve been chasing my tail with last-child.
