Css border query

[neilkw]

Just a quick question..

on this site http://www.layersmagazine.com/

The main nav which has subscribe, renew, about us etc has a neat rollover colour change but I am unsure as to how the 3 dividing vertical dots (via Safari) have been implemented. Are they set via a border in css and if so how ?

Any pointers?
cheers

[mwinter]

http://www.layersmagazine.com/

The main nav which has subscribe, renew, about us etc has a neat rollover colour change but I am unsure as to how the 3 dividing vertical dots have been implemented. Are they set via a border in css and if so how ?

It's a non-repeating background image, with some added padding on the links to space them out (background images and colours are rendered within the padding and content regions of an element). When the links are hovered, the background image is changed to reflect the hover colour scheme.

I wouldn't copy the markup exactly, though. A menu like that should be marked-up as a list. However, the end result is much the same. I've created an example for you to look at.

In case you're wondering, the spaces around the menu item text are non-breaking spaces (U+00A0,  ). IE5.0 doesn't like padding on in-line elements, and though it can mistakenly apply the width CSS property to them, that's a little too much hassle to apply to each item.

Hope that helps,
Mike

[neilkw]

Absolute class! thanks a bunch. Any chance I can see the style sheet aswell?

[mwinter]

Any chance I can see the style sheet aswell?

You should be able to resolve the URLs yourself, but for convenience: the basic style sheet and the menu-specific rules. As noted in the basic style sheet, the menu rules are imported to hide them from older browsers.

If you use Firefox or Mozilla, I suggest you download the Web Developer Extension, by Chris Pederick. The "View CSS" menu item is a simple way of viewing all embedded and external style sheets.

Mike

[neilkw]

Once again, that's top stuff. Many thanks. i had no idea Firefox was so smart.