Page 1 of 1

IE positioning

Posted: Tue Aug 15, 2006 5:37 pm
by s.dot
Page: http://65.29.93.164/smp/index.html

Displays like I want it in FireFox & Opera. IE seems to not position the blue gradient directly in the center. Is there some kind of weird IE right margin?

CSS

Code: Select all

body {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: #087cb6;
	background-image: url(../images/bg_main.gif);
	background-position: top center;
	background-repeat: repeat-y;
	text-align: center;
}
.masterDiv {
	margin-left: auto;
	margin-right: auto;
	width: 748px;
	background-color: transparent;
	
}
.header {
	width: 748px;
	height: 85px;
	background-image: url(../images/bg_top_gradient.gif);
	background-position: center center;
	background-repeat: repeat-x;
	text-align: center;
}
HTML

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>css test</title>
<link rel="stylesheet" href="includes/style.main.css" media="screen" />
</head>
<body>
<div class="masterDiv">
	<div class="header">stuff</div>
</div>
</body>
</html>

Posted: Tue Aug 15, 2006 5:41 pm
by feyd
whitespace issue? </div></div>

Posted: Tue Aug 15, 2006 5:45 pm
by s.dot
Same with the HTML all on one line.

Code: Select all

<body><div class="masterDiv"><div class="header">stuff</div></div></body>

Posted: Tue Aug 15, 2006 6:49 pm
by Benjamin
Try adding border to masterDiv.

Code: Select all

.masterDiv {
        margin-left: auto;
        margin-right: auto;
        width: 748px;
        background-color: transparent;
        border-width: 0px;       
}

Posted: Tue Aug 15, 2006 6:58 pm
by s.dot
No luck there, either.

The background image (the white box with gray lines on each side) is exactly 750px wide. With 1 px lines on each side.

So, I made the other two divs 748px and centered them to fill up the white.. but show the lines on each side. IE just seems to push it about 2px too far left.

Posted: Tue Aug 15, 2006 7:10 pm
by Benjamin
Just playing around, this works.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>css test</title>
<style type="text/css">
body {
        margin: 0px;
        background-color: #000000;
        text-align: center;
}
.masterDiv {
	  margin: 0px auto 0px auto;
        width: 748px;
        background-color: #ffffff;
        height: 300px;
       
}
.header {
        height: 85px;
        background-image: url(bg_top_gradient.gif);
        background-repeat: repeat-x;
        text-align: center;
} 
</style>
</head>
<body>
<div class="masterDiv">
        <div class="header">stuff</div>
</div>
</body>
</html> 

Posted: Tue Aug 15, 2006 7:18 pm
by s.dot
Indeed it does, thanks. Wonder why it won't work with the background image?