2px difference in positioning in Firefox and IE

next · May 2, 2008

for some reason i end up with different layouts in FF and IE, my difference is 2px, see my screenshots for more info:

FireFox:

IE:

Firefox is fine, IE is the one who is broken, how can i fix this?

my html:

<!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" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="next" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />

<title>AHK</title>
<style type="text/css" media="all">
	@import "styles.css";
</style>
<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>
</head>
<body id="bg_grad">
<div id="logo"><span>AHK</span></div>
<div id="container">
	<form action="login.php" method="post">
		<fieldset>
		<label for="login">log in:<input type="text" name="login" id="login" size="7" /></label>
		<label for="pass">Password:<input type="password" name="pass" id="pass" size="7" /></label>

		<input type="submit" value="login" />
		</fieldset>
	</form>
	<div id="content">
	</div>
	<ul>
		<li id="home"><a href="#"><span>home</span></a></li>
		<li id="tutorials"><a href="#"><span>tutorials</span></a></li>
		<li id="functions"><a href="#"><span>functions</span></a></li>
		<li id="donate"><a href="#"><span>donate</span></a></li>
	</ul>
</div>
</body>
</html>

my CSS:

* {margin: 0; padding: 0;}
ul {list-style: none;}
a{text-decoration: none;}

#bg_grad {
background: #DAE0FF url("bg_top.gif") top left repeat-x;
}

#logo {
background: white url("AHK_logo.gif") top left no-repeat;
width: 737px;
height: 324px;
margin-left: 244px;
}
#logo span {display: none;}

#container {
width: 700px;
min-height: 600px;
margin: auto;
background: white url("bottom_splash.gif") bottom left no-repeat;
}

form {
background: url("bookmark.gif") top left no-repeat;
float: right;
margin-top: -300px;
height: 220px; width: 379px;
}

fieldset {
border: none;
margin: 185px 0 0 90px;
}

ul li span {display: none;}

ul li#home a {
display: block;
background: url("home.gif") top left no-repeat;
width: 100px; height: 100px;
margin-left: -50px;
}

ul li#tutorials a {
display: block;
background: url("tutorials.gif") top left no-repeat;
width: 115px; height: 115px;
margin: -10px 0 0 30px;
}

ul li#functions a {
display: block;
background: url("functions.gif") top left no-repeat;
width: 125px; height: 125px;
margin: 10px 0 0 70px;
}

ul li#donate a {
display: block;
background: url("donate.gif") top left no-repeat;
width: 142px; height: 142px;
margin-left: -20px;
}

Basicaly this part:

#logo {
background: white url("AHK_logo.gif") top left no-repeat;
width: 737px;
height: 324px;
margin-left: 244px;
}

controls the logo.

Anyone knows how to fix this?

next · May 2, 2008

nvm, i fixed it

Sign In

2px difference in positioning in Firefox and IE

Recommended Posts

next

Link to comment

Share on other sites

next

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information