CSS Parse Errors

parse errors font-family border-style

[chrisneils]

I got my css validated and came up with the errors listed below - I put a star beside the ones that I really need to know, any help is much appreciated.

*7 body Parse Error verdana;
*7 body Parse error - Unrecognized arial;
*7 body Parse error - Unrecognized helvetica;
*7 body Parse error - Unrecognized sans-serif;
8 Unknown pseudo-element or pseudo-class :center
8 text-align Parse Error center;
9 text-align Parse error - Unrecognized }
*91 h1 Parse Error Verdana, Arial, Helvetica, sans-serif;
92 font-size Parse Error font-size:16px;
93 font-color Parse Error font-color:#cccccc;
94 font-color Parse error - Unrecognized }
*97 h2 Parse Error Verdana, Arial, Helvetica, sans-serif;
98 font-size Parse Error font-size:14px;
99 font-color Parse Error font-color:#000000;
100 border-left Parse Error border-left:;
101 border-top Parse Error border-top:;
102 border-top Parse error - Unrecognized }
*105 .special Parse Error Verdana, Arial, Helvetica, sans-serif;
106 font-size Parse Error font-size:12px;
107 color Parse Error color:#000000;
108 Unknown pseudo-element or pseudo-class :italic
108 font-style Parse Error italic;
109 border-left Parse Error border-left:;
110 border-top Parse Error border-top:;
111 border-top Parse error - Unrecognized }
*114 .important Parse Error Verdana, Arial, Helvetica, sans-serif;
115 font-size Parse Error font-size:16px;
116 color Parse Error color:#ff0000;
117 Unknown pseudo-element or pseudo-class :italic
117 font-style Parse Error italic;
118 Unknown pseudo-element or pseudo-class :bold
118 font-weight Parse Error bold;
119 font-weight Parse error - Unrecognized }
*122 .small Parse Error Verdana, Arial, Helvetica, sans-serif;
123 font-size Parse Error font-size:12px;
124 color Parse Error color:#ff0000;
125 Unknown pseudo-element or pseudo-class :italic
125 font-style Parse Error italic;
126 Unknown pseudo-element or pseudo-class :bold
126 font-weight Parse Error bold;
127 font-weight Parse error - Unrecognized }
*130 .sub Parse Error Verdana, Arial, Helvetica, sans-serif;
131 font-size Parse Error font-size:14px;
132 Unknown pseudo-element or pseudo-class :bold
132 font-weight Parse Error bold;
133 font-color Parse Error font-color:#000000;
134 border-left Parse Error border-left:;
135 border-top Parse Error border-top:;
136 border-top Parse error - Unrecognized }
*139 .sub2 Parse Error Verdana, Arial, Helvetica, sans-serif;
140 font-size Parse Error font-size:13px;
141 Unknown pseudo-element or pseudo-class :bold
141 font-weight Parse Error bold;
142 font-color Parse Error font-color:#000000;
143 font-color Parse error - Unrecognized }
*146 .footer Parse Error verdana, Arial, Helvetica, sans-serif;
147 font-size Parse Error font-size:11px;
148 font-color Parse Error font-color:#ffffff;
149 font-color Parse error - Unrecognized }
*157 font-color Parse error - Unrecognized .1 { border:0px; border-top: 1px; border-style: 1px dashed #ccc; width:75%; height:1px; }
160 .dashed Value Error : border grey is not a color value : 1px dashed grey

[Marshall]

Hi chrisneils and welcome to WebmasterWorld.

You will need to post the CSS in order for anyone to figure out the problem. It could be as simple as a : or ; missing somewhere which would cause the rest to have errors.

Marshall

[chrisneils]

Hi sorry - here is the coresponding CSS:

body {
background-image:url('images/texture.png');
background-repeat: repeat-x;
background-color: #ff6600;
margin-top:0px;
font-size:13px;
font-family:Rockwell, verdana, arial, helvetica, sans-serif;
text-align:center;
}

#wrapper {
width: 1000px;
background-color:#ffffff;
margin-left: auto;
margin-right: auto;
border: thin solid #999999;
text-align:left;
}

#header {
padding: 0px;
margin: 3px;
text-align: left;
background-color:#ffffff;
border-bottom: 0px;
}

#nav {
width: 140px;
float: left;
margin:0px;
}

#main {
margin-left:140px;
margin:0px;
}

#content {
margin-left:140px;
margin-top:64px;
}

#content-terms {
margin-left:140px;
margin-top:64px;
font-weight:bold;
}

#footer {
margin: 0px;
border-top: thin solid #999999;
background-color:#00cc00;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: #FF0000;
}

a:active {
text-decoration: none;
}

div#footer ul li{
color:#000000;
background-color:transparent;
display: inline;
}div#footer ul li a{
color:#115EAC;
background-color:transparent;
text-decoration : none;
}div#footer ul li a:hover{
text-decoration:underline;
}

h1 {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-color:#cccccc;
}

h2 {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-color:#000000;
border-left:;
border-top:;
}

.special {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
font-style:italic;
border-left:;
border-top:;
}

.important {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#ff0000;
font-style:italic;
font-weight:bold;
}

.small {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ff0000;
font-style:italic;
font-weight:bold;
}

.sub {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
font-color:#000000;
border-left:;
border-top:;
}

.sub2 {
font-family:Rockwell; Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
font-color:#000000;
}

.footer {
font-family:Rockwell; verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-color:#ffffff;
}

.1 {
border:0px;
border-top: 1px;
border-style: 1px dashed #ccc;
width:75%;
height:1px;
}

.dashed {
border: 1px dashed grey;
width:75%;
}

span.faq {
background-color:#cccccc;
}

.footerlink a:link {
color:#ff0000;
text-decoration:underline;}

.footerlink a:visited {
color:#ff0000;
text-decoration:underline;}

.footerlink a:hover {
color:#ff6600;
text-decoration:underline;}

.footerlink2 a:link {
color:#000000;
text-decoration:none;}

.footerlink2 a:visited {
color:#000000;
text-decoration:none;}

.footerlink2 a:hover {
color:#ff6600;
text-decoration:none;}

.footerlink3 a:link {
color:#ffffff;
text-decoration:none;}

.footerlink3 a:visited {
color:#ffffff;
text-decoration:none;}

.footerlink3 a:hover {
color:#00cc00;
text-decoration:none;}

.footerlink4 a:link {
color:#00cc00;
text-decoration:none;}

.footerlink4 a:visited {
color:#00cc00;
text-decoration:none;}

.footerlink4 a:hover {
color:#ff6600;
text-decoration:none;}

.footerlink5 a:link {
color:#ffffff;
text-decoration:underline;}

.footerlink5 a:visited {
color:#ffffff;
text-decoration:underline;}

.footerlink5 a:hover {
color:#00cc00;
text-decoration:none;}

[Marshall]

What I did, and you should do in the future, is go to the CSS Validator [jigsaw.w3.org] where you can simply paste in your CSS file and run tests until it passes.

Below is the corrected CSS which passed. There is one notation in red which you can change to what you want. When you have time, compare the CSS you provided with the corrected on to see what changed.

Marshall

Validated CSS -

body {
background-image:url('images/texture.png');
background-repeat: repeat-x;
background-color: #ff6600;
margin-top:0px;
font-size:13px;
font-family:Rockwell, verdana, arial, helvetica, sans-serif;
text-align:center;
}

#wrapper {
width: 1000px;
background-color:#ffffff;
margin-left: auto;
margin-right: auto;
border: thin solid #999999;
text-align:left;
}

#header {
padding: 0px;
margin: 3px;
text-align: left;
background-color:#ffffff;
border-bottom: 0px;
}

#nav {
width: 140px;
float: left;
margin:0px;
}

#main {
margin-left:140px;
margin:0px;
}

#content {
margin-left:140px;
margin-top:64px;
}

#content-terms {
margin-left:140px;
margin-top:64px;
font-weight:bold;
}

#footer {
margin: 0px;
border-top: thin solid #999999;
background-color:#00cc00;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: #FF0000;
}

a:active {
text-decoration: none;
}

div#footer ul li{
color:#000000;
background-color:transparent;
display: inline;
}div#footer ul li a{
color:#115EAC;
background-color:transparent;
text-decoration : none;
}div#footer ul li a:hover{
text-decoration:underline;
}

h1 {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#cccccc;
}

h2 {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
}

.special {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
font-style:italic;
}

.important {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#ff0000;
font-style:italic;
font-weight:bold;
}

.small {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ff0000;
font-style:italic;
font-weight:bold;
}

.sub {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#000000;
}

.sub2 {
font-family:Rockwell, Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#000000;
}

.footer {
font-family:Rockwell, verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

.error1 /*cannot be just a number */ {
border:0px;
border-top: 1px;
border: 1px dashed #ccc;
width:75%;
height:1px;
}

.dashed {
border: 1px dashed gray;
width:75%;
}

span.faq {
background-color:#cccccc;
}

.footerlink a:link {
color:#ff0000;
text-decoration:underline;}

.footerlink a:visited {
color:#ff0000;
text-decoration:underline;}

.footerlink a:hover {
color:#ff6600;
text-decoration:underline;}

.footerlink2 a:link {
color:#000000;
text-decoration:none;}

.footerlink2 a:visited {
color:#000000;
text-decoration:none;}

.footerlink2 a:hover {
color:#ff6600;
text-decoration:none;}

.footerlink3 a:link {
color:#ffffff;
text-decoration:none;}

.footerlink3 a:visited {
color:#ffffff;
text-decoration:none;}

.footerlink3 a:hover {
color:#00cc00;
text-decoration:none;}

.footerlink4 a:link {
color:#00cc00;
text-decoration:none;}

.footerlink4 a:visited {
color:#00cc00;
text-decoration:none;}

.footerlink4 a:hover {
color:#ff6600;
text-decoration:none;}

.footerlink5 a:link {
color:#ffffff;
text-decoration:underline;}

.footerlink5 a:visited {
color:#ffffff;
text-decoration:underline;}

.footerlink5 a:hover {
color:#00cc00;
text-decoration:none;}

[piskie]

Yes, that's the problem. A CSS Class cannot start with or be just a number.