Validating CSS

[ReportingAnalyst]

Hi,

I am trying to validate my CSS page using the W3 validator service.

On running, I noticed several errors:

What do I do about the 1 st error?

Line: 8 
Parse error - Unrecognized : <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-color:#5a5b5e; font-size: 12px; }

In this line, it says that it is not a valid color. But it is a color nevertheless customized. What about this error?

Line: 13 Context : .otherInfo 
Property font-color doesn't exist : #5a5b5e

 

[traingamer]

Try simply

color:#5a5b5e;

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ReportingAnalyst]

What about this error?

Line: 89 Context : Arial, Helvetica, Sans-Serif 
Parse Error - Sans-Serif;

Is Sans-Serif an invalid font type?

Thanks.

 

[traingamer]

sans-serif and Sans-serif both work fine for me. It's kind of hard to trouble-shoot your css one snippet at a time. The following css will validate, even though the fonts probably don't exist.

p {font-family: Jones, smith, Omar-Sharif}

What is the rest of line 89?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ReportingAnalyst]

OK.

Error 1:

Line: 8
Parse error - Unrecognized : <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, Sans-Serif; color:#5a5b5e; font-size: 12px; }

Line 8 is: (In Bold)

<style type="text/css">

body
{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#5a5b5e;
font-size: 12px;
[b]}[\b]

-----------------

Line: 82 Context : .caption
attempt to find a semi-colon before the property name. add it

Line 82 is in bold (this action shows a gradient color from white to blue)

.caption
{
[/b]filter:progid:DXImageTransform.Microsoft.Gradient[b]
      (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#C7D9E6');
height: 1em;
width: 6em;
margin-left: 5em;
margin-top: 1em;
TEXT-ALIGN: center;
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
color: #C7D9E6;
}

-----------------------

Line: 89 Context : Arial, Helvetica, Sans-Serif
Parse Error - Sans-Serif;

Line 89 is the following in bold

.caption
{
filter:progid:DXImageTransform.Microsoft.Gradient
      (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#C7D9E6');
height: 1em;
width: 6em;
margin-left: 5em;
margin-top: 1em;
TEXT-ALIGN: center;
[b]FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;[/b]
color: #C7D9E6;
}

Thanks

 

[traingamer]

This validates for me

body
{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#5a5b5e;
font-size: 12px;
}

Try it without the <style type="text/css">

Your other examples all validate if you remove the 'filter' property. I've not worked with 'filter' so I'm not much help there.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ChrisHunt]

If this is a stand-alone stylesheet, you do not need or want the [tt]<style type="text/css">[/tt] line. That's an HTML tag and this is a CSS document that you're validating.

The [tt]filterrogid...[/tt] thingie is a Microsoft-only extension to CSS, it's never going to validate. That's not to say that you shouldn't use it, but be aware that the effect will only work in Internet Explorer. A more cross-browser approach to producing a gradient effect would be to use a suitable background image.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ReportingAnalyst]

I removed the HTML tags from the stand alone CSS file.

Everybody uses IE within the intranet either through Office, or VPN, or at home where the computers at home are provided by the organization. So I wrote according to IE.

However I did notice that while testing this website on a person who works through VPN in Brasil, the gradient did not work right. It was more like the Submit button had half of white and half of blue as if the button had 2 rows of colors within it. So it was looking very odd. Any software where I can create a small roundish curved rectangle button? We do not have any picture editing software.

Thanks.