I din't see a need for the class tags... your main problem was the syntax of your css..
you had
a: link should have been a:link
your color was color: 003399; should have been color: #003399;
You should remove the errant css from your XHTML markup and include it in your external css file. Should be like this (notice the corrections I included that you should still make)
HTML Code:
#header {
position:relative;
width:900px;
height:223px;
left: 50%;
margin-left: -450px; /* half the width of the div */
z-index:1;
top: 0px;
}
} /*this line should be removed, the extra "}" is causing an error in CSS */
/*remove this section, its redundant as previously cleared in the opening line*/
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/*end remove*/
#page_body {
position:absolute;
width:700px;
height:700px;
left: 50%;
margin-left: -350px; /* half the width of the div */
z-index:2;
top: 238px;
}
Your completed and VALID css will look like this:
HTML Code:
/**VALID CSS by Tommy Logic 2008**/
/*visit http://www.tommylogic.com*/
body, h1, h2, h3, h4, p, ul, li {
margin: 0px;
padding: 0px;
}
#header {
position:relative;
width:900px;
height:223px;
left: 50%;
margin-left: -450px; /* half the width of the div */
z-index:1;
top: 0px;
}
#page_body {
position:absolute;
width:700px;
height:700px;
left: 50%;
margin-left: -350px; /* half the width of the div */
z-index:2;
top: 238px;
}
#links1 {
font-family: "Times New Roman", Times, serif;
font-size: 13px;
color: #009900;
text-align: left;
position: absolute;
left: 0px;
width: 25%;
top: 26px;
}
#links1 a:link {
color: #009900;
font-weight: bold;
text-decoration: none;
}
#links1 a:hover {
color: #003300;
font-weight: bold;
text-decoration: underline;
background-color: #FFFF99;
}
#links1 a:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
}
#links2 {
font-family: "Courier New", Courier, monospace;
font-size: 13px;
text-align: center;
position: relative;
width: 25%;
left: 35%;
top: 26px;
color: #0033FF;
}
#links2 a:link {
color: #003399;
font-weight: bold;
text-decoration: none;
}
#links2 a:hover {
color: #000000;
font-weight: bold;
text-decoration: underline;
background-color: #FFFF99;
}
#links3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #CC0000;
position: absolute;
width: 25%;
right: 0px;
text-align: right;
top: 26px;
}
#links3 a:link {
color: #CC0000;
font-weight: bold;
text-decoration: none;
}
#links3 a:hover {
color: #990000;
font-weight: bold;
text-decoration: underline;
background-color: #FFFF99;
}
#links3 a:visited {
color: #CC0000;
font-weight: bold;
text-decoration: none;
}
There is quite a bit of redudndant styling. It will validate, just not necessary. Also of note, you should go back in your Markup and set all your alt tags on your images in order to get it to validate. Dont forget to remove your css in the markup.. link to your new file.
Markup Validation: FAILED 13 Errors
CSS Validation: FAILED 1 Error