CSS background to repeat left and right

[Joe San]

I have the following CSS property defined for a navigation element:

#menu ul li a {
    position: relative; bottom: -4px;
    float: left;
    color: #808080;
    padding: 5px 10px;
    text-decoration: none;
    background: white url(../images/menudivide.gif) repeat-y left top;
    border-bottom: 4px solid #808080;
}

The image below shows the rendered page. How do I get the dotted line to appear on the right hand side as well? I tried various combinations of the repeat attribute only to make it worse. Any ideas?

[Bear Bibeault]

Why aren't you just using borders rather than background images? I advise to never use a background image when an effect can be achieved with pure CSS.

Then it's a simple matter to define a right border to the last item.

I would also be styling the item, not the link within it.

[Joe San]

Bear Bibeault wrote:Why aren't you just using borders rather than background images? I advise to never use a background image when an effect can be achieved with pure CSS.

Then it's a simple matter to define a right border to the last item.

I would also be styling the item, not the link within it.

That was a good suggestion. I removed the image and replaced it with a CSS border and I can now get what I wanted very easily.

[Bear Bibeault]

I think a lot of people stick with images for this type of thing out of habit. With modern CSS, you can do a lot without images.

[Bear Bibeault]

For example, did you know that you can create the following using just CSS?



See this fiddle to see how.

[Disclaimer: this is not my example; I got the original code from Chris Coyier's most excellent CSS-tricks site.]

[Rob Crowther]

My favourite CSS demos at the moment are Ana Tudor's (unfortunately they seem to only work properly in Firefox). Have a look at this video for some explanation of the theory.