Solved

3px Gap Between Divs in IE

Posted on 2006-11-07
4
1,307 Views
Last Modified: 2011-09-20
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.
0
Comment
Question by:JP_1981
  • 2
4 Comments
 
LVL 33

Expert Comment

by:hongjun
ID: 17890145
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;
}
0
 
LVL 3

Expert Comment

by:rixlabs
ID: 17891453
Try with:
*{
       margin:0px;
       padding:0px;
}
0
 

Author Comment

by:JP_1981
ID: 17891538
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.
0
 
LVL 3

Accepted Solution

by:
rixlabs earned 125 total points
ID: 17891689
Use this fix:

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

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

in FF the dimensions don't change.


p.s. sorry for the bad english

RiX
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
IPhone using PC internet 17 63
Google Chrome Notifications 2 65
Mac Os Sierra Safari Tabs 12 60
Lots of browser tabs open affecting system performance - bad habit 14 76
I spend far too much time on the web keeping up with the news: politics, the environment, computer stuff, the Experts Exchange. It's never-ending. But many of the most informative web pages are overwhelmed with noise: scrolling banners, flashing tex…
I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question