Prev: Div inline without float
Next: Unwanted Horizontal Scrollbar
From: shapper on 8 Apr 2010 08:22
Hello,

I am styling an anchor as follows:

ul.Menu li a {
color: #D0D0D0;
font: normal 1.6em 'Helvetica Neue', Arial, Helvetica, sans-
serif;
letter-spacing: 0.02em;
padding: 6px 14px;
text-decoration: none;
}

ul.Menu li a:link {background-color: #303030;}
ul.Menu li a:visited {background-color: #303030;}
ul.Menu li a:link:hover, ul.Menu li a:visited:hover {background-
color: #303845;}
ul.Menu li a:link:active, ul.Menu li a:visited:active {background-
color: #303845;}

I am styling the common elements in the "a" tag and what is different
in the "a" pseudo tags.

Is this correct?
Should I define the color and text decoration in all pseudo classes?
And what about the font?

I tend to style what is common in "a" and what changes in the pseudo
classes but I am not sure about this.

Thank You,
Miguel
From: Thomas 'PointedEars' Lahn on 8 Apr 2010 15:31
shapper wrote:

> I am styling an anchor as follows:
>
> ul.Menu li a {
> color: #D0D0D0;

Told you.

> font: normal 1.6em 'Helvetica Neue', Arial, Helvetica, sans-
> serif;
> letter-spacing: 0.02em;

> padding: 6px 14px;
> text-decoration: none;
> }
>
> ul.Menu li a:link {background-color: #303030;}
> ul.Menu li a:visited {background-color: #303030;}

Told you.

> ul.Menu li a:link:hover, ul.Menu li a:visited:hover {background-
> color: #303845;}
> ul.Menu li a:link:active, ul.Menu li a:visited:active {background-
> color: #303845;}
>
> I am styling the common elements in the "a" tag and what is different
> in the "a" pseudo tags.
>
> Is this correct?

No, you are declaring the property values common to `a' elements with
the `a' element selector and what is different with the pseudo-classes
applicable to `a' elements (and `a' element selectors).

Do not forget :focus for keyboard navigation.

> Should I define the color and text decoration in all pseudo classes?

Yes, that is recommended, see my previous posting. (You do not read
carefully enough.)

> And what about the font?

What about it?

> I tend to style what is common in "a" and what changes in the pseudo
> classes but I am not sure about this.

You should only use the `a' element selector standalone if you want to
style anchors and textual links alike, otherwise you are risking side-
effects. Insofar the solution in my previous followup should probably be
refined to

...,
li a:link,
li a:visited {
float: left;
}

Reading the CSS Specification and making test cases can provide more
assurance.

And you really should wrap your source code more.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
 | 
Pages: 1
Prev: Div inline without float
Next: Unwanted Horizontal Scrollbar