Separators for Navigation

Question

I need to add separators between elements of navigation. Separators are images.

My HTML structure is like: ol > li > a > img.

Here I come to two possible solutions:

1. To add more li tags for separation (boo!),
2. Include separator in image of each element (this is better, but it makes possibility that user may click on, example, "Home", but get to "Services", because they are one behind the other and user may accidentally click on separator that belongs to "Services");

What to do?

Answer 1

If there isn't a pressing need to use images for the separators, you could do this with pure CSS.

nav li + li:before{     content: " | ";     padding: 0 10px; } 

This puts a bar between each list item, just as the image in the original question described. But since we're using the adjacent selectors, it doesn't put the bar before the first element. And since we're using the :before pseudo selector, it doesn't put one at the end.

Answer 2

Simply use the separator image as a background image on the li.

To get it to only appear in between list items, position the image to the left of the li, but not on the first one.

For example:

#nav li + li {     background:url('seperator.gif') no-repeat top left;     padding-left: 10px } 

This CSS adds the image to every list item that follows another list item - in other words all of them but the first.

NB. Be aware the adjacent selector (li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.