CSS Validation.

[Naild]

Hi everyone,

I'm having problems with getting a stylesheet validated. It appears you cannot use the attribute "transparent" for a background-color:

I've searched all over for a solution to this, but came up empty. Does anyone know of a CSS corrector generator? Here's the stylesheet I'm trying to validate-

body {
background-color: #000000;
}

div, table, td, tr {

font-family: times new roman;
font-size:8pt;
line-height: 11px;
text-align: justify;
color: #EDD087; 
}

a:link, a:visited, a:active {
  color: #5F7C78;
  text-decoration: none;
  }
a:hover { 
  color : #EDD087; 
  text-decoration : none ;
  cursor: crosshair;
  position: relative; top: 1px; left: 1px;
  }

b {
color: #EDD087;
font-family: times new roman;
font-style: italic;
font-size: 12pt;
line-height: 17px;
font-weight: normal;
text-align: justify; 
}

h1 {
font-family: times new roman;
font-size: 13px; 
color: #5F7C78;  
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #5F7C78;
margin: 2px;
}

Any input at all would be appreciated.

[mwinter]

I'm having problems with getting a stylesheet validated.

The style sheet you posted is valid, but it's far from best practice, hence all of the warnings.

It appears you cannot use the attribute "transparent" for a background-color:

Value, and of course you can. The style sheet you posted doesn't contain a transparent value.

body {
background-color: #000000;
}

A background colour should always be paired with a foreground colour. Also, rather than specifying the font family in various locations, do it once and include a generic type.

body {
  background: #000000;
  color: #edd087;
  font: 100% "Times New Roman", serif;
}

div, table, td, tr {
[...]
font-size:8pt;
line-height: 11px;

The point (pt) unit is primarily for printed material and pixels (px) should be avoided like the plague as both prevent IE from resizing text. This especially important when authors, such as yourself apparently, choose font sizes that will be unreadable to some. Use percentages, where body text is 100% of the browser default, and smaller text (like legalese) is no smaller than 85% of that.

a:link, a:visited, a:active {
color: #5F7C78;
text-decoration: none;
}
a:hover {
color : #EDD087;

Again, background colours should be paired with foreground colour declarations. However, this guideline can be broken when another rule will provide one or the other, as shown below.

As a rule, the underline should rarely be removed from links, especially if they will appear amongst text.

a:link,
a:visited,
a:active {
  background: transparent;
  color: #5f7c78;
  text-decoration: none;
}
a:link:hover {
  color: #edd087;
}

As the first rule will also apply when the second does (as a hovered link is still a link), the other declarations need not be repeated. It does no harm if they are, though.

b {
[...]
font-style: italic;
[...]
font-weight: normal;

Why on Earth are you rendering bold (b) text italic? If you want italic text, use the i element, unless it's for emphasis, in which case use an em element.

Mike

[Naild]

Thanx for the reply Mike, it was a TREMENDOUS help. I'm close to validation now, but for some reason you are forced to use a background color in Headers <h1>.

This passed the W3C validation, but it I don't want a background color because I have some <h1> on top of an image-

body {
background-image : url("twilightbg.jpg"); 
background : #000000; 
color : #edd087; 
font : 75% "Times New Roman", serif; 
} 
divcontainer {
font-size : 8pt; 
line-height : 11px; 
text-align : justify; 
background : #000000; 
color : #edd087; 
} 
a:link, a:visited, a:active {
background : #000000; 
color : #5f7c78; 
text-decoration : none; 
} 
a:link:hover {
background : #000000; 
color : #edd087; 
} 
b {
background : #000000; 
color : #edd087; 
font-style : italic; 
font-size : 12pt; 
line-height : 17px; 
font-weight : normal; 
text-align : justify; 
} 
h1 {
background-color: #000000; 
color : #5f7c78; 
font-size : 13px; 
letter-spacing : 1px; 
text-transform : uppercase; 
border-bottom : 1px solid #5f7c78; 
margin : 2px; 
}

Like I had previously stated. Transparent is not a valid color value according to W3C rules.
Here's where I'm checking for validation-

http://jigsaw.w3.org/css-validator/

[mwinter]

I'm close to validation now, but for some reason you are forced to use a background color in Headers <h1>.

As I already told you, you are not. The validator is warning you that you are using a transparent background. The reason for this warning is that, depending on what else is rendered within the document, the content may or may not be readily visible.

body {
background-image : url("twilightbg.jpg");
background : #000000;

This background declaration will override the value of the background-image declaration. Combine them:

background: #000000 url(twilightbg.jpg);

Like I had previously stated. Transparent is not a valid color value according to W3C rules.

Rubbish, and you still have yet to post a style sheet that demonstrates this alleged invalidity; replacing the background colour of the heading with transparent still produces a valid style sheet.

Your font sizes still use the wrong units.

Mike