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;
}

Recommended Answers

All 3 Replies

Wow...that's awful. I'm looking into it. give me some time and I'll see if i can fix it.

EDIT: Um looks like you will need two stylesheets. Unless you want me to completely re-do the original to work in firefox and IE the same. otherwise two stylesheets (one for IE and one for other browsers since the problems are only in IE) is the way I think would be best.

Why did you seperate all the links? Have them in one container and make them list using ul li and set li to have no bullet points...Also position absolute is not such a good coding habit. I think I'm going to try and re-do your code from the ground up and achieve the same look without so much code, and with better code. First I'll try and do it by leaving it with the code you supplied.

Ok finished. I re-wrote the html and css codes but kept the same links and names for your divs. I took out a lot unnecessary code from the css and added two new divs. The codes are:

<!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>
	<div id="container">
		<div id="header">
        	<ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Donate</a></li>
                <li><a href="">What is "Got Skills"?</a></li>
        	</ul>
		</div>
        <div id="topnavcontain">
            <div id="topnavheader">
                Navigation
            </div>
            <div id="topnav">
                <ul>
                    <li><a href="#personaltracker">Track Your Skills</a></li>
                    <li><a href="#clanmatetracker">Track Clanmate's Skills</a></li>
                    <li><a href="#skilltournaments">Skill Tournaments</a></li>
                    <li><a href="#clanmatetracker">View Settings</a></li>
                    <li><a href="#clanportal">Clan Portal</a></li>
                <ul>
            </div>
        </ul>
        <div id="bottomnavcontain">
            <div id="bottomnavheader">
            Your Account
            </div>
            <div id="bottomnav">
                <ul>
                    <li><a href="#register">Register</a></li>
                    <li><a href="#login">Log In</a></li>
                    <li><a href="#why">Why Register?</a></li>
                </ul>
            </div>
        </div>
	</div><!--end containeer-->
</body>
</html>
body {
	margin: 0;
	padding: 0;
	width: 800px;
	background: #000000;
	font-family: georgia;
	font-size: 90%;
	color: #444343;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
}
#container {
	margin: 0;
	background-image: url('Images/container.png') ;
	width: 800px;
}
#header{
	float: left;
	display: block;
	width: 800px;
	height: 112px;
	background-image: url('Images/header.png');
	margin: 100px 0 0 0;
	padding: 0 0 0 0;
}
#header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
}
#header li {
	margin-left: 60px;
	float: left;
}
#header li a {
	display: block;
	float: left;
	text-decoration: none;
}
#topnavcontain {
	float: left;
	display: block;
	width: 163px;
	height: 158px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#topnavheader {
	display: block;
	height: 20px;
	color : #04AfDf;
	background-image: url('Images/topnavhead.png');
	margin: 0 0 0 20px;
	padding: 0 0 0 0;
}
#topnav {
	display: block;
	height: 138px;
	background-image: url('Images/topnav.png');
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#topnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
}
#topnav li {
	margin-top: 10px;
	float: left;
}
#topnav li a {
	width: 163px;
	display: block;
	float: left;
	text-decoration: none;
}
#bottomnavcontain {
	float: left;
	display: block;
	width: 163px;
	height: 158px;
	margin: 20px 0 0 0;
	padding: 0 0 0 0;
}
#bottomnavheader {
	display: block;
	height: 20px;
	color : #04AfDf;
	background-image: url('Images/bottomnavhead.png');
	margin: 0 0 0 20px;
	padding: 0 0 0 0;
}
#bottomnav {
	display: block;
	height: 138px;
	background-image: url('Images/bottomnav.png');
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#bottomnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
}
#bottomnav li {
	margin-top: 10px;
	float: left;
}
#bottomnav li a {
	width: 163px;
	display: block;
	float: left;
	text-decoration: none;
}
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;
}

I tested this in IE, Firefox, Safari, and Opera and it works in all of them and looks the same in all of them. This site looks exactly as yours does, but works in IE like you wanted and is better organized and made. Please learn from this cause I'm not going to write this back up for you. You had a lot of errors in your code like position absolute and not finishing you tags. a few end divs were also missing.

Next time you need help with a code, make sure simple errors are not there, and make sure you have learned from this!

oh and you're welcome

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.