Everybody likes to use dividers between their links on occaision to make it clear where one ends and the next begins. Over on the css-d list, someone asked is it possible in pure css. I conclude that is sort of possible to generate a faux pipe delimited list, and here is my example 1 solution.
To get started I looked at a work by "Fat Eric" referenced on the css-d list that worked in IE6 and Firefox, but did not work in IE7. It did not work in Internet Explorer 7 because it uses the star (*) hack for Internet Explorer 6 that has been retired in IE7.
I played around a little and think I have it solved for the most part. I used an example referenced here by Alex. I simply combined part of Eric's work with that to come up with the solution -- granted it neither uses, nor harms a single pipe character.
In Eric's case, he requires a hack, but in Firefox it is actually a pipe inserted between list elements. In Alex's case, he is hiding the first pipe, but it actually exists. I combine the two in a faux pipe delimited result that hides nothing (except in IE6 where I'm still hiding the first border by using a negative margin). I say faux, because there is never actually a pipe. There are thin borders on the left of all but the first list elements (in ie7 and ff) that appear to be pipes. Note that if you copy and paste, you will see the difference because there are no pipes to copy. So have a look at my example faux pipe delimited list.
Ok, so I was bothered greatly by the hidden pipe in my first example. I decided it was time to try something else. (Never mind the fact that we could enter the pipes manually and for real -- but then that has two problems -- they are actual characters in the page that aren't content and well you cannot just stick them between li items, you should put them in the li or in their own li elements -- but as usual, I digress). I decided that if I simply class the lead list element (class='leadin') then I could actually remove the border (or faux pipe as I now think of it) from the first unordered list item in all three browsers I'm working on -- Internet Explorer 7, Internet Explorer 6 and Firefox. My second version works and because I lost the first child declaration, Version 2 of my faux pipe delimited list menu is essentially the same weight as the original. I also have some screenshots courtesy of David Laasko that say it works fine in Opera 9, Explorer 5.5 and Safari 2.0. It does NOT WORK in Explorer 5.0 (from my perspective, who cares?) where it lacks the dividers and Macintosh 5.2 where it misplaces the pipes.
(note: after doing the above, I go back and re-read a page I looked at yesterday by Jarrod Spillers ... and other than not really getting why he classes his "last" list item, my work is the same as his. Guess I wasn't reading carefully the first time.)
Feel free to use it any way you wish (after all it's hardly mine at all). If you need help implementing a solution on your pages, feel free to contact me as I often work on a freelance or subcontracted basis.
I actually now find this example that does what I was trying to do, but apparently better.
If you would like to learn more with our other tutorials:
Back to the Tutorial Index
