I'm working on a new project [It's actually a PHP project. Go figure]. Anyways, I designed it myself, and coded it myself. I was almost done with it, and I went to run it in Mozilla, and it looked great. I went to run it in Internet Explorer (7), and it was slaughtered. It also looks fine in Safari.
Can someone help me find where it went wrong? I tried to find out by using the W3 Validator, but that just messed me up more. I don't know which Doctype thing to put, so I just slapped one on there. =/.
Any help is greatly appreciated.
Edit: Here's the site-http://andrewhuckstest.freehostia.com/index.html
Html-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<center>
<!-- Container holds everything together. It's centered. -->
<div id=container>
<!-- Header is at the Top. Holds the main links. -->
<div id=header>
<div id="hometext">
<a class="#index.php" href="">Home</a>
</div>
<div id="abouttext">
<a class="#about" href="">About</a>
</div>
<div id="contacttext">
<a class="#contact" href="">Contact</a>
</div>
<div id="donatetext">
<a class="#donate" href="">Donate</a>
</div>
<div id="whattext">
<a class="#whatweare" href="">What is "Got Skills"?</a>
</div>
<!--Topnavheader is right above the Top nav link box. Holds the word "Navigtion -->
<div id=topnavheader>
Navigation
</div>
<!--Topnav is under topnavheader. Contains Tracker links. -->
<div id=topnav>
<div id="navyourstats">
<a href="#personaltracker">Track Your Skills
</div>
<div id="navclanmatestats">
<a href="#clanmatetracker">Track Clanmate's Skills
</div>
<div id="navtourns">
<a href="#skilltournaments">Skill Tournaments
</div>
<div id="settings">
<a href="#clanmatetracker">View Settings
</div>
<div id="clanportal">
<a href="#clanportal">Clan Portal
</div>
</div>
<div id=bottomnavheader>
Your Account
</div>
<div id=bottomnav>
<div id="register">
<a href="#register">Register
</div>
<div id="login">
<a href="#login">Log In
</div>
<div id="why">
<a href="#why">Why Register?
</div>
</div>
</center>
</body>
</html>CSS-
body {
background: #000000;
font-family: georgia;
font-size: 90%;
color: #444343;
font-weight: bold;
}
div#container {
width: 800px;
height: 800px;
background-image: url(Images/container.png) ;
margin : 0 0 0 0;
padding : 0px 0 0 0px;
}
div#header{
width: 729px;
height: 112px;
background-image: url(Images/header.png);
margin: 0 0 0 0;
padding: 0px 0 0 0px;
}
div#topnavheader {
width: 183px;
height: 20px;
background-image: url(Images/topnavhead.png);
margin: 200px 0 0 0px;
padding: 0px 0 0 0px;
position: absolute;
}
div#topnav {
width: 183px;
height: 138px;
background-image: url(Images/topnav.png);
margin: 230px 0 0 0px;
padding: 0px 0 0 0px;
float: left;
}
div#hometext {
width : 30px;
height : 75px;
margin : 87px 0 0 52px;
padding : 0px 0 0 0px;
font-size : 12px;
position : absolute;
}
div#abouttext {
width : 30px;
height : 75px;
margin : 87px 0 0 172px;
padding : 0px 0 0 0px;
font-size : 12px;
position : absolute;
}
div#contacttext {
width : 30px;
height : 75px;
margin : 87px 0 0 282px;
padding : 0px 0 0 0px;
font-size : 12px;
position : absolute;
}
div#donatetext {
width : 30px;
height : 75px;
margin : 87px 0 0 414px;
padding : 0px 0 0 0px;
font-size : 12px;
position : absolute;
}
div#whattext {
width : 200px;
height : 75px;
margin : 87px 0 0 503px;
padding : 0px 0 0 0px;
font-size : 12px;
position : absolute;
}
div#navyourstats {
width: 130px;
margin: 10px 0 0 20px;
padding : 0 0 0 0;
position: absolute;
font-size: 11px;
}
div#navclanmatestats {
width: 160px;
margin: 35px 0 0 26px;
padding : 0 0 0 0;
position: absolute;
font-size: 11px;
}
div#navtourns {
width: 160px;
margin: 61px 0 0 13px;
padding : 0 0 0 0;
position: absolute;
font-size: 11px;
}
div#settings {
width: 160px;
margin: 86px 10px 10px -04px;
padding : 0 0 0 0;
position: absolute;
font-size: 11px;
float: left;
}
div#clanportal {
width: 160px;
margin: 113px 10px 10px -10px;
padding : 0 0 0 0;
position: absolute;
font-size: 11px;
float: left;
}
div#bottomnavheader {
width: 183px;
height: 20px;
background-image: url(Images/bottomnavhead.png);
margin: 400px 0 0 0px;
padding: 0px 0 0 0px;
position: absolute;
}
div#bottomnav {
width: 183px;
height: 98px;
background-image: url(Images/bottomnav.png);
margin: 430px 0 0 0px;
padding: 0px 0 0 0px;
position: absolute;
}
div#register {
width: 130px;
margin: 12px 0 0 -08px;
padding : 0 0 0 0;
position: absolute;
font-size: 12px;
}
div#login {
width: 130px;
margin: 40px 0 0 -16px;
padding : 0 0 0 0;
position: absolute;
font-size: 12px;
}
div#why {
width: 130px;
margin: 68px 0 0 12px;
padding : 0 0 0 0;
position: absolute;
font-size: 12px;
}
a:link {
text-decoration : none;
color : #444343;
}
a:visited {
text-decoration : none;
color : #444343;
}
a:active {
text-decoration : none;
color : #444343;
}
a:hover {
text-decoration : none;
color : #04AfDf;
}
a.nav {
font-weight : bold;
}
a.nav:link {
text-decoration : none;
color : #ffffff;
}
a.nav:visited {
text-decoration : none;
color : #ffffff;
}
a.nav:active {
text-decoration : none;
color : #ffffff;
}
a.nav:hover {
text-decoration : none;
color : #ffffff;
}