asked on

3px Gap Between Divs in IE

Hi, I am trying to design a page layout using DIVs. The problem I am having is that a 3px gap appears between the three div's at the top of the page when using IE, there is no gap in NN. I have searched through alot of similar problems/solutions but none have worked. The two div's below the top 3 behave correctly with no gap and I cannot see why there is a difference. A solution and good explanation to my problem would be much appreciated.

Thank you in advance!

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="LDC_css.css" />
<title>Lincoln Dog Club</title>
</head>
<body>
<div id="container">
<div id="left_cap"></div>
<div id="end_cap"></div>
<div id="header"></div>

<div id="nav_bar">
HOME<br />
LINK...<br />
LINK...<br />
LINK...<br />
LINK...<br />
LINK...
</div>

<div id="page"><h1>Title</h1>
<p>BLAH BLAH BLAH ETC
</p>

</div>

</div>
</body>
</html>

body {
background: silver;
text-align: center;
}

#container {
text-align: center;
width:90%;
background: white;
padding: 10px;
}

#end_cap {
background: green;
border: none;
float: right;
width: 150px;
height: 125px;
}

#left_cap {
background: red;
border: none;
float: left;
width: 150px;
height: 125px;
}

#header {
height: 125px;
text-align: center;
background: yellow;
float: none;
}

#nav_bar {
background-color: yellow;
border: 2px solid blue;
width: 175px;
height: 550px;
float: left;
}

#page {
border: 2px solid RED;
float: none;
}

Both HTML and CSS validate fine.

hongjun

I am not sure which one are you referrring to.

But you can try this and hope I understand you correctly.

body {
background: silver;
text-align: center;
margin-top: 0px;
}

rixlabs

Try with:
*{
margin:0px;
padding:0px;
}

JP_1981

ASKER

Sorry I dont think I explained things very well. across the top of the page I have 3 div's next to each other, instead of being flush next to each other IE is putting a 3 px gap between the div's-I have set the background to red yellow and green to make it easier, I would like a solution and possible explanation whats happening so I can avoid this in future.

ASKER CERTIFIED SOLUTION

rixlabs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial