IE positioning

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

IE positioning

Post 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>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

whitespace issue? </div></div>
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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;       
}
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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> 
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Indeed it does, thanks. Wonder why it won't work with the background image?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Post Reply