margin gap in ie7

sudhakararaog · 02-15-2009, 10:43 AM

i am having a serious issue with ie 7 i really need help.

i am using a center layout using 900px the center layout looks and works fine

in all browsers except for ie7 i have used a border for the wrapper tag.
what i have noticed only in the case of ie7 is the left border for the wrapper

tag starts a few pixels 2px or 3px before compared to all other browsers and

due to this in ie7 the right border ends a few pixels when compared to all

other browsers. so if i can fix the left border the right border for the

wrapper tag will adjust automatically.

i am using a valid xhtml transitional document. following is my code.

-------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background image</title>

<style type="text/css">

body {
text-align: center;
margin: 0;
font-family: Verdana;
font-size: 10px;
}

#wrapper {
width: 900px;
text-align: left;
margin: 0 auto;
border: 1px solid #ffff00;
}

p{
margin: 0;
padding: 0;
}

</style>

</head>

<body>

<div id="wrapper">
<p>Content </p>
</div></body></html>

-------------------------------
can someone please tell me what the issue is and what the code should be. i

would highly appreciate any help as this is an issue in ie7 and not in other

browsers.

thanks.

coothead · 02-15-2009, 11:36 AM

Hi there sudhakararaog,

I can discern no difference whatsoever between IE7's and Firefox's rendering of your code.

coothead

Excavator · 02-15-2009, 07:58 PM

Hello sudhakararaog,
I changed your code a little to add some colors for contrast, my old eyes need all the help they can get.

http://nopeople.com/test/Untitled-1.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background image</title>
<style type="text/css">
body {
	text-align: center;
	font: 10px Verdana;
	background: #FC6;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#wrapper { 
	width: 900px; 
	text-align: left; 
	margin: 30px auto; 
	border: 1px solid #f00; 
}
</style>
</head>
<body>
    <div id="wrapper">
    	<p>Content </p>
    </div>
</body>
</html>

It's easy to see when you open it in IE8 and flip back and forth between regular and compatability views.

I thought at first you were seeing some default margin/padding so added the universal reset. That didn't make any difference.

Then I noticed it... old eyes, remember? ... It's the scroll bar. IE7 is giving you a scroll bar which pushes #wrapper over.
Figure out why IE7 gives you a scrollbar when it's not needed OR force a scrollbar with all browsers by adding height:100.1%; to body.