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

Dani AI

Generated

Quick summary: the layout differences between Firefox/Safari and IE7 almost always come from malformed HTML or fragile positioning, not from a single mysterious bug. has a mix of deprecated tags, unclosed elements, odd attribute values and heavy use of absolute positioning; ’s rewrite (consolidating links into lists and removing most absolute positioning) is the right direction and already fixes many issues.

Immediate, concrete fixes to apply

  • Use a simple, standards-triggering doctype. For modern cross-browser behavior prefer:
    <!DOCTYPE html>
  • Make the HTML well-formed: quote attribute values, close every <a> and <div>, and remove the <center> tag (center with CSS instead). Invalid or mismatched doctypes and unclosed tags commonly force IE into quirks mode and change layout rules.
  • Stop using position:absolute for the whole layout. Reserve absolute only for small UI pieces. Use flow layout (floats, inline-block) or modern methods (flex/grid) so browsers calculate widths/heights consistently.
  • Fix any malformed CSS values (examples like -04px are invalid) and avoid fixed container heights; let content drive height or use min-height.

Practical debugging steps

  • Validate after the doctype and markup fixes; validation is most useful once the page is syntactically correct.
  • Use the browser dev tools (IE’s F12) to inspect computed box sizes and to toggle rules. Temporarily add visible outlines or background colors to boxes to see how they stack.
  • Strip background images and isolate sections to find which rule breaks the flow. Also confirm image/file name case matches the server (case-sensitive hosts will hide images if casing differs).

Takeaway: adopt semantic markup (nav lists), clean up the HTML first, then simplify CSS. ’s approach is a solid learning example—keep that structure and focus next on fixing the doctype, quotes/closing tags, and removing broad absolute positioning.

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.