Here are my comments/suggestions/complaints... all in one post...
It, like spork pointed out, is not valid, but has only 7 errors being XHTML Strict with UTF at 8. Here is the complete valid Strict HTML code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Craig Campbell Online</title>
<link rel="stylesheet" href="jca.css" />
</head>
<body>
<div class="content">
<img id="banner" src="craiglogo.gif" alt="Craig Campbell Online" />
<div class="nav_wrap">
<div class="nav_cube">
<div style="top: 30px; left: 0px;"><a href="#" class="white_cube"> </a></div>
<div style="top: 30px; left: 80px;"><a href="#" class="white_cube"> </a></div>
<div style="top: 110px; left: 0px;"><a href="#" class="blue_cube"> </a></div>
<div style="top: 110px; left: 80px;"><a href="#" class="blue_cube"> </a></div>
<div style="top: 190px; left: 0px;"><a href="#" class="white_cube"> </a></div>
<div style="top: 190px; left: 80px;"><a href="#" class="white_cube"> </a></div>
<div style="top: 280px; left: 0px;"><a href="#" class="blue_cube"> </a></div>
<div style="top: 280px; left: 80px;"><a href="#" class="blue_cube"> </a></div>
</div>
</div>
<div class="text">
<h1>Contact</h1>
<p>You should now be able to view this website. It is only one page in size, but it's more of a template.</p>
<p>Thanks for viewing</p>
</div>
<p>test</p>
</div>
</body>
</html>
and the new
invalid CSS
*body {
font-size: 12px;
margin: 0;
padding: 0;
font-family: Arial;
background-color: #000000;
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
font-size: 14px;
border-bottom: 1px solid #ffffff;
}
.content {
position: absolute;
width: 70%;
height: auto;
top: 15%;
left: 15%;
bottom: 15%;
right: 15%;
border: 1px solid #CC0001;
background-image: url('images/exposure.jpg');
background-repeat: no-repeat;
background-position: center;
}
a:link {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}
a:active {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}
a:visited {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}
.text {
color: #ffffff;
position: absolute;
top: 30%;
left: 5%;
text-align: justify;
padding-left: 1em;
padding-right: 1em;
margin-left: 1em;
background-color: #4a4a4a;
opacity: .85;
filter: alpha(opacity=85);
width: 60%;
height: 60%;
border: 1px solid #cc0000;
}
.nav_cube {
position: absolute;
top: 1px;
right: 0px;
color: #ffffff;
width: 154px;
height: 155px;
}
.nav_cube div {
position: absolute;
width: 46px;
height: 46px;
border: 1px solid #666666;
}
.nav_wrap {
position: static;
margin-bottom: 30em;
}
.nav_cube div a {
display: block;
width: 100%;
height: 100%;
}
.nav_cube div a:link, .nav_cube div a:visited {
text-decoration: none;
}
.nav_cube div a:hover {
}
a.white_cube { background-color: #ffffff; }
a.white_cube:link, a.white_cube:visited {
opacity: .40;
filter: alpha(opacity=40);
}
a.blue_cube { background-color: #14008b; }
a.blue_cube:link, a.blue_cube:visited {
opacity: .75;
filter: alpha(opacity=75);
}
a.green_cube { background-color: #335c33; }
a.green_cube:link, a.green_cube:visited {
opacity: .80;
filter: alpha(opacity=80);
}
a.white_cube:hover, a.blue_cube:hover, a.green_cube:hover {
opacity: 1;
filter: alpha(opacity=1);
}
In that version of the CSS and HTML, the opacity works in both Firefox and IE but the height of the div (text) is smaller than what it should be. In Firefox .text shows correctly.
The reason that I changed the attributes to the tag "<div>" from "..id=" "..." to "...class=" "..." is because that way it would be XHTML Strict compliant and it still works just how it should be. I just spent about 2 hours playing with positions and adding new divs and finally got it to work in both browsers satisfactorily (to me). I put my screen resolution to 800x600 and it was kind of messed up in Firefox and IE showed it the best in that screen resolution, but I doubt you have to worry about it.
Obviously, I liked your site template. I hope that you use it. Why do I like it? What proves it? I like it because it is simple. It is XHTML Strict compliant. Well, now it is anyway. And I worked on your template for about 2+ hours. I did it because I wanted to. The following would be more of a review than some of my "donations" if you will
PLUS: CSS template
MINUS: Not a valid file
IDEA: Make it a valid file
PLUS: Great site, over all.
MINUS: The banner's bottom right edge shows pixels.
IDEA: Smooth out the banners curved corner.
PLUS: Nice clean site layout
MINUS: Your Personal? e-mail is on the banner.
IDEA: If that e-mail is personal, the one you use with your friends, I advice you to make an e-mail account that is made just for the site.
I don't really have any complaints against your site design. Keep it up, and I hope you use this design.
The opacity on the DIV "text" wouldn't work in IE because it can't read " opacity: .80 " it needs the filter(opacity=80) " thing in there.
* The CSS is not valid according to W3 because of opacity. W3 operantly says that it is an invalid code. It doesn't matter if it is filter(opacity=80) or opacity: .80 . W3 CSS validator says that it is invalid.