Stylesheets - Writing Valid CSS (help)

Author

Writing Valid CSS (help)

eomer

2005-12-12, 10:33 pm

Hi, I trying to validate myy CSS using
http://jigsaw.w3.org/css-validator/. I get back some errors, but I
don't understand them. I will leave you with the errors and then the
CSS. Thanks in advance.

Line : 24 (Level : 1) You have no background-color with your color :
div.navigationItem a
Line : 29 (Level : 1) You have no color with your background-color :
div.navigationItem a:link

div.navigationItem a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: right;
letter-spacing: 1px;
margin: 0px;
color: blue; /* THIS IS LINE 24 */
border-top: 1px solid black;
}

div.navigationItem a:link{
background: white; /* THIS IS LINE 29 */
text-decoration: none;
}

Beauregard T. Shagnasty

2005-12-12, 10:33 pm

eomer wrote:

> Hi, I trying to validate myy CSS using
> http://jigsaw.w3.org/css-validator/. I get back some errors, but I
> don't understand them. I will leave you with the errors and then the
> CSS. Thanks in advance.
>
> Line : 24 (Level : 1) You have no background-color with your color :
> div.navigationItem a
> Line : 29 (Level : 1) You have no color with your background-color :
> div.navigationItem a:link

These are warning, not errors. The reason is a visitor may have set a
text color the same as your background, and would not be able to see
your text.

> div.navigationItem a {
> display: block;
> font-weight: bold;
> text-decoration: none;
> text-align: right;
> letter-spacing: 1px;
> margin: 0px;
> color: blue; /* THIS IS LINE 24 */
--> background: white;
> border-top: 1px solid black;
> }
>
> div.navigationItem a:link{
> background: white; /* THIS IS LINE 29 */
--> color: black;
> text-decoration: none;
> }

The rule is: if you set one, set the other as well.

--
-bts
-Warning: I brake for lawn deer

Jim Moe

2005-12-12, 10:33 pm

eomer wrote:
> Hi, I trying to validate myy CSS using
> http://jigsaw.w3.org/css-validator/. I get back some errors, but I
> don't understand them. I will leave you with the errors and then the
> CSS. Thanks in advance.
>
> Line : 24 (Level : 1) You have no background-color with your color :
> div.navigationItem a
> Line : 29 (Level : 1) You have no color with your background-color :
> div.navigationItem a:link
>
I believe those are only warnings.
To avoid certain problems where foreground or background defaults may
have unintended consequences, it is advisable to pair color and background
together. Most of the time it does not matter.
A common place where this is important is in <body>. A foreground color
(for text) is typically specified but the background color is not. Some
people have a non-white background selected (for whatever reason), say
black, that can contrast poorly with the foreground color, which is
usually black. Hard to read.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Rob Stampfli

2005-12-13, 6:52 pm

In article <1piv67uh0nev2$.1eh1vecgacg97.dlg@40tude.net>,
Beauregard T. Shagnasty <a.nony.mous@example.invalid> wrote:
>eomer wrote:
>
>
>These are warning, not errors. The reason is a visitor may have set a
>text color the same as your background, and would not be able to see
>your text.
>
>--> background: white;
>--> color: black;
>
>The rule is: if you set one, set the other as well.

I don't understand the 2nd warning either: It would seem
he has specified both a color (line 24) and a background
color (line 29), right?

Rob

Beauregard T. Shagnasty

2005-12-13, 6:52 pm

Rob Stampfli wrote:

> In article <1piv67uh0nev2$.1eh1vecgacg97.dlg@40tude.net>,
> Beauregard T. Shagnasty <a.nony.mous@example.invalid> wrote:
>
> I don't understand the 2nd warning either: It would seem
> he has specified both a color (line 24) and a background
> color (line 29), right?

No. In his example, a color is specified for "div.navigationItem a" and
a background color is specified for "div.navigationItem a:link". You
need to assign both for each selector.

--
-bts
-Warning: I brake for lawn deer

Rob Stampfli

2005-12-13, 6:52 pm

In article <2xfkyylxuv3j$.tio0w47en4s2$.dlg@40tude.net>,
Beauregard T. Shagnasty <a.nony.mous@example.invalid> wrote:
>Rob Stampfli wrote:
....
>
>No. In his example, a color is specified for "div.navigationItem a" and
>a background color is specified for "div.navigationItem a:link". You
>need to assign both for each selector.

This is a poor example, because the color of a:link *is* typically
set implicitly so its color would generally not be inherited, but
the CSS validator consistently complains, as you say, if you assign
either a color or background-color anywhere without specifying the
other.

But, shouldn't the color and/or background-color be inherited if
one is not explicitly given?

In other words, if you've set the background-color in <body>,
why should you need to restate it explicitly if you later set the
color in, say, a <span>? Why should the validator issue a warning
in such a case?

Rob

Darin McGrew

2005-12-13, 6:53 pm

Rob Stampfli <restamp@hotmail.com> wrote:
> But, shouldn't the color and/or background-color be inherited if
> one is not explicitly given?

Yes. But from what is it going to be inherited?

> In other words, if you've set the background-color in <body>,
> why should you need to restate it explicitly if you later set the
> color in, say, a <span>? Why should the validator issue a warning
> in such a case?

The C in CSS is for "Cascading". Rules from other style sheets can cascade
with your rules. As an example, you might specify color and background for
BODY elements, but a user style sheet might specify color and background
for P elements. If you specify only color for SPAN elements, which
background will they be shown against?
--
Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/

"I'd love to make time, if only I could find the recipe."

Rob Stampfli

2005-12-13, 6:53 pm

In article <dnngo6$r72$1@blue.rahul.net>,
Darin McGrew <mcgrew@stanfordalumni.org> wrote:
>
>
>Rob Stampfli <restamp@hotmail.com> wrote:
>
>Yes. But from what is it going to be inherited?
>
>
>The C in CSS is for "Cascading". Rules from other style sheets can cascade
>with your rules. As an example, you might specify color and background for
>BODY elements, but a user style sheet might specify color and background
>for P elements. If you specify only color for SPAN elements, which
>background will they be shown against?

Granted. But, a user style sheet could just as easily specify a
background image for P elements, yet I don't see the validator
complaining about the lack of an explicit "background-image:"
attribute to undo this on every element where a "color" is
specified. So why pick on "background-color"?

Rob

Beauregard T. Shagnasty

2005-12-13, 6:53 pm

Rob Stampfli wrote:

> So why pick on "background-color"?

Because it is so frequently abused by newbie authors? :-)

--
-bts
-Warning: I brake for lawn deer

Chris Morris

2005-12-14, 6:24 am

restamp@hotmail.com (Rob Stampfli) writes:
> Granted. But, a user style sheet could just as easily specify a
> background image for P elements, yet I don't see the validator
> complaining about the lack of an explicit "background-image:"
> attribute to undo this on every element where a "color" is
> specified. So why pick on "background-color"?

Usually better to use "background" rather than "background-color" in
author stylesheets, for precisely that reason. I thought the CSS
checker *did* advise that, but maybe not.

--
Chris