Solved

3px Gap Between Divs in IE

Posted on 2006-11-07
4
1,299 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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 open PDF in adobe 5 168
Browser authentication 1 61
File conversion question 5 54
Hide IE  and Firefox toolbar 5 50
After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Ple…
Several part series to implement Internet Explorer 11 Enterprise Mode
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now