Forum Moderators: not2easy
Thanks in advance for reading my post.
I've been having issues with my CSS. After running it through W3, W3 has identified the following errors:
4 Unknown pseudo-element or pseudo-class :unknown
19 Unknown pseudo-element or pseudo-class :unknown
33 Unknown pseudo-element or pseudo-class :unknown
77 .bodycopy Parse Error #000000;
77 .bodycopy Parse Error ;}
23 .style4 Parse Error {#000000;
23 Verdana, Helvetica, sans-serif Parse Error : Arial
23 Verdana, Helvetica, sans-serif Parse Error sans-serif;
23 Verdana, Helvetica, sans-serif Parse Error ;}
Here is the corresponding CSS script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[specifics deleted]</title>
<meta name="description" content=
"[specifics deleted]">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #CC0000;
background-image: url(images/pgbg.jpg);
background-attachment: fixed;
background-repeat:repeat-x;
}
</style>
<link href="scripts/SLBP-styles.css" rel="stylesheet" type=
"text/css">
<style type="text/css">
<!--
.style3 {font-size: 16px}
.style4 {#000000; font-family: Arial, Verdana, Helvetica, sans-serif;}
.style6 {font-size: 16}
.style11 {font-size: 18px}
.style12 {
color: #03C;
FONT-WEIGHT: bold;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}
.style16 {color: #000000; FONT-WEIGHT: normal; font-family: Arial, Verdana, Helvetica, sans-serif;}
.style17 {color: #FFFFFF; font-family: Arial, Verdana, Helvetica, sans-serif;}
.style21 {
color: #FF0000;
font-weight: bold;
}
.style37 {
color: #CC0000;
font-size: 38px;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.style38 {color: #CC0000; font-size: 24px; font-weight: bold; }
.style59 {font-size: 20px}
.style62 {color: #CC0000; font-size: 22px; font-weight: bold; }
.style63 {
font-size: 24px;
color: #000000;
}
.style64 {
font-size: 18pt;
font-weight: bold;
}
-->
</style>
The CSS is making the margins off when viewing the page with IE.
Any help would be much appreciated!
Thanks,
Brian!
[edited by: swa66 at 5:31 pm (utc) on April 24, 2009]
[edit reason] removed specifics [/edit]
A.pglnk:link {
FONT-SIZE: 14px; COLOR: #03F; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: underline; FONT-WEIGHT: normal;
}
A.pglnk:unknown {
COLOR: #CC0001; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: underline; FONT-WEIGHT: normal;
}
A.pglnk:visited {
FONT-SIZE: 14px; COLOR: #03F; FONT-FAMILY:Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: underline; FONT-WEIGHT: normal;
}
A.pglnk:hover {
FONT-SIZE: 14px; COLOR: #0000FF; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: underline; FONT-WEIGHT: normal;
}
A.EmailLink:link {
FONT-SIZE: 10px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION:none; FONT-WEIGHT: normal;
}
A.EmailLink:unknown {
COLOR: #00FF00; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: none; FONT-WEIGHT: normal;
}
A.EmailLink:visited {
FONT-SIZE: 10px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: none; FONT-WEIGHT: normal;
}
A.EmailLink:hover {
FONT-SIZE: 10px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: underline; FONT-WEIGHT: normal;
}
A.navLink:link {
FONT-SIZE: 12px; COLOR: #FFFFFF; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION:none; FONT-WEIGHT: normal;
}
A.navLink:unknown {
COLOR: #FFFFFF; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: none; FONT-WEIGHT: normal;
}
A.navLink:visited {
FONT-SIZE: 12px; COLOR: #FFFFFF; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: none; FONT-WEIGHT: normal;
}
A.navLink:hover {
FONT-SIZE: 12px; COLOR: #cccccc; FONT-FAMILY: Arial, Helvetica,Verdana sans-serif; TEXT-DECORATION: underline; FONT-WEIGHT: normal;
}
.highlightgrey14 {
font-size: 14px; font-family: Arial, Verdana, Helvetica, sans-serif; BACKGROUND-COLOR: #FF6; FONT-WEIGHT: normal; color: #000000;
}
.highlightgrey18 {
font-size: 18px; font-family: Arial, Verdana, Helvetica, sans-serif; BACKGROUND-COLOR: #FF6; FONT-WEIGHT: normal; color: #000000;
}
.redHl28 {font-size: 28px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: normal;}
.redHl18 {font-size: 18px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: normal;}
.redHl22 {font-size: 22px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: normal;}
.redHl32 {font-size: 32px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: normal;}
.redHl20 {font-size: 20px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: normal;}
.blackHl28 {font-size: 28px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; FONT-WEIGHT: normal;}
.blackHl18 {font-size: 18px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; FONT-WEIGHT: normal;}
.blackHl36 {font-size: 36px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; FONT-WEIGHT: normal;}
.blackHl24Arial {font-size: 24px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; FONT-WEIGHT: normal;}
.blackHl20Arial {font-size: 20px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; FONT-WEIGHT: normal;}
.cpyrtwhite {font-size: 11px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FFFFFF;}
.bodycopynoindent14grey {font-size: 14px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #6699CC;}
.bodycopy {font-size: 14px; font-family: Arial, Verdana, Helvetica, sans-serif; #000000;}
.bodycopy12 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000000;}
.bodycopy16 {font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #000000;}
.bluecopy18 {font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #003466
; font-weight:bold}
.bodycopy11 {font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #000000;}
.redbodycopy14 {font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #FF0000;}
.tstmnlblu {font-size: 13px; font-family: Georgia, "Times New Roman", Times, serif; color: #03C; FONT-WEIGHT: normal; }
.tstmnlblu16 {font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; color: #03C; FONT-WEIGHT: normal; }
.tstmnl {font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; FONT-WEIGHT: normal; }
.tstmnlAuth {font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: bold;}
.tstmnlAuthProf {font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FF0000; FONT-WEIGHT: normal; }
.tblBrdr { BORDER-RIGHT: 1px dashed; BORDER-TOP: 1px dashed; BORDER-LEFT: 1px dashed; BORDER-BOTTOM: 1px dashed; border-color:#FF0000;}
.tblBrdrRed { BORDER-RIGHT: 3px dotted; BORDER-TOP: 3px dotted; BORDER-LEFT: 3px dotted; BORDER-BOTTOM: 3px dotted; border-color:#FF0000;}
.tblBrdrPln { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BORDER-COLOR:#FF0000;}
.tblBrdrPlnblu { BORDER-RIGHT: 2px solid; BORDER-TOP: 2px solid; BORDER-LEFT: 2px solid; BORDER-BOTTOM: 2px solid; BORDER-COLOR: #333;}
Thanks!
4 Unknown pseudo-element or pseudo-class :unknown
19 Unknown pseudo-element or pseudo-class :unknown
33 Unknown pseudo-element or pseudo-class :unknown
77 .bodycopy Parse Error #000000;
77 .bodycopy Parse Error ;}
23 .style4 Parse Error {#000000;
23 Verdana, Helvetica, sans-serif Parse Error : Arial
23 Verdana, Helvetica, sans-serif Parse Error sans-serif;
23 Verdana, Helvetica, sans-serif Parse Error ;}
The number in front is the line number of your input.
It helps finding things (esp. if you can look for line numbers in your editor.)
There is no pseudo class :unknown (I can't guess why you added it, but could remove those selectors.)
.style4 {#000000; font-family: Arial, Verdana, Helvetica, sans-serif;}
.bodycopy {font-size: 14px; font-family: Arial, Verdana, Helvetica, sans-serif; #000000;}
Now fixing that will fix errors against syntax, but you're far from done.
Numbering classes: why ? Give them a meaningful name. Describe not what they do, but describe what they are used for (e.g, not "red" but "warning")
Use inheritance and the cascade:
you have a how many times a font-family ?
- Use one font-family as default: set it on the body, all elements will inherit it.
- Use the contracting one once, and list all selectors that need it.
It'll decrease your CSS with at least half the size you have now.
If you style the link, you don't need to repeat it all for each of the pseudo classes. Just list what you want changed.