Solved

3px Gap Between Divs in IE

Posted on 2006-11-07
4
1,309 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Secure Connection Failed - Sonicwall FW 1 106
MP4 Video spawning in a video player - How to control size and location 1 53
windows 10 6 53
What browser will run Java? 7 131
Internet is a big network which is formed by connecting multiple small networks.It is a platform for all the users which are connected to it.Internet act as platform in different fields. Such as: Internet  as a collaboration platform. Internet  as…
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

696 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