Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

3px Gap Between Divs in IE

Posted on 2006-11-07
4
Medium Priority
?
1,312 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 500 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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…
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…
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 +…

647 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