Extra space (margin or whitespace) underneath

**CorkyMcDoogle** · May 4, 2007 22:07

Hello,

I've run into a problem that I can't seem to solve.

IE is adding some unwanted extra space. I'm working on this locally so I have to show you in picture form.

I'm not sure if this is extra margin or just whitespace. I've tried taking any spaces out of the code to see if that did anything but it didn't.

FF and Opera are displaying the correct 5px gap. It is important to the layout that it be exactly 5px.

Since you can't see the layout I'm not sure if posting the CSS will help you out. I've tried taking out all margins but it still leaves space even when there should be 0px gap.

Hopefully I'm overlooking something simple.

- Thanks

**Dan Schulz** · May 4, 2007 22:14

Can you post the code for the page?

**CorkyMcDoogle** · May 4, 2007 22:27

The problem is just above the footer. Here is a pic of the entire layout.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">
  <div id="header"><h1><a href="#">Wordpress Blog Title</a></h1>
  <h2>This is where your cool motto goes...</h2>
  </div>
  
   <div id="topmenu">
   <ul>
   <li><a href="#">About</a></li>
   <li><a href="#">Projects</a></li>
   <li><a href="#">Another</a></li>
   
   
   <div class="clearer"></div>
   </ul>
  </div>
  
   <div id="leftcontain">
     <div id="entry">
	 <h2><a href="#">Cool Post</a></h2>
	 <span class="datecomments">Posted on May 3rd | <a href="#">2 Comments</a></span>
       <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
	    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
		 <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
		  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
     </div>
	
   </div>
   
   <div id="rightcontain">
   <div id="right">
   <h2>List Item</h2>
     <ul>
	 <li><a href="#">Something</a></li>
	 <li><a href="#">Projects</a></li>
	 <li><a href="#">Test</a></li>
	 </ul>
	 
	<h2>Menu</h2>
     <ul>
	 <li><a href="#">Something</a></li>
	 <li><a href="#">Projects</a></li>
	 <li><a href="#">Test</a></li>
	 </ul>
   </div>
   </div>
   
   <div class="clearer"></div>  
</div>
  
  
 
<div id="footercontainer">
  <div id="footer">Footer</div>
</div>
</body>
</html>

Code:

html, body {
	margin: 0px;
	padding: 0px;
	background-color: #eeeeee;
	}
.clearer{
	clear: both;
	margin: 0px;
	padding: 0px;
}
#wrapper {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 35px;
	padding-left: 35px;
	background-image: url(images/wrapperbg.gif);
	padding-top: 5px;
	background-repeat: repeat-y;
	height: auto;
}
#header{
	background-color: #FFFFFF;
	border: 3px double #E8E8E8;
	height: auto;
	width: 684px;
	background-image: url(images/boxgrad.gif);
	background-repeat: repeat-x;
	background-position: top;
	padding: 5px;
	margin-bottom: 5px;
	text-align: center;
}
#header h1, #header h1 a{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #000000;
	letter-spacing: .1em;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	font-variant: small-caps;
}
#header h1 a:hover{
	color: #666666;
}
#header h2{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 14px;
	color: #CCCCCC;
	margin: 0px;
	padding: 0px;
	font-variant: small-caps;
}
#topmenu{
	height: auto;
	width: 690px;
	border: 3px double #E8E8E8;
	margin-bottom: 5px;
	background-color: #FFFFFF;
	padding: 2px;
	background-image: url(images/boxgrad.gif);
	background-repeat: repeat-x;
	background-position: top;
}
#topmenu ul{
	padding: 0px;
	list-style-type: none;
	margin: 0px;
}
#topmenu li{
	margin: 0px;
	float: left;
}
#topmenu li a{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 12px;
	color: #666666;
	text-decoration: none;
	background-color: #EEEEEE;
	display: block;
	border: 3px double #CCCCCC;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-right: 5px;
	font-variant: small-caps;
	background-image: url(images/topmenubg.gif);
	background-repeat: repeat-x;
}
#topmenu li a:hover{
	border: 3px double #666666;
	color: #666666;
}
#leftcontain{
	height: auto;
	width: 489px;
	float: left;
	margin-right: 5px;
}
#rightcontain{
	float: left;
	height: auto;
	width: 195px;
}
#right{
	height: auto;
	width: 189px;
	float: left;
	border: 3px double #e8e8e8;
	background-color: #FFFFFF;
	padding: 5px;
	background-image: url(images/boxgrad.gif);
	background-repeat: repeat-x;
	background-position: top;
}
#entry{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 12px;
	color: #333333;
	border: 3px double #e8e8e8;
	background-color: #FFFFFF;
	background-image: url(images/boxgrad.gif);
	background-repeat: repeat-x;
	background-position: top;
	padding: 5px;
	height: auto;
	margin-bottom: 5px;
	float: left;
	width: 473px;
}
#entry h2, #entry h2 a{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	letter-spacing: .1em;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
}
#entry h2 a:hover{
	color: #666666;
}
.datecomments{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 10px;
	color: #999999;
}
.datecomments a{
	text-decoration: underline;
	color: #666666;
}
.datecomments a:hover{
	color: #333333;
}
#right ul{
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
#right h2{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	margin-top: 0px;
	margin-bottom: 5px;
	font-variant: small-caps;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
}
#right li{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 12px;
	color: #333333;
	background-image: url(images/bullet.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 15px;
}
#right li a{
	font-family: "Lucida Sans Unicode", sans-serif;
	color: #666666;
	text-decoration: underline;
}
#right li a:hover{
	color: #333333;
}
#footercontainer{
	background-image: url(images/footerbg.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 25px;
	margin-right: auto;
	margin-left: auto;
	width: 700px;
	padding-right: 35px;
	padding-left: 35px;
}
#footer{
	padding: 10px;
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 12px;
	color: #666666;
	border: 3px double #e8e8e8;
	background-color: #FFFFFF;
	background-image: url(images/boxgrad.gif);
	background-repeat: repeat-x;
	background-position: top;
	height: auto;
	width: auto;
}
#footer p{
	margin: 0px;
	padding: 0px;
}

User Tag List

Thread: Extra space (margin or whitespace) underneath

Thread Tools

Display

Extra space (margin or whitespace) underneath

Bookmarks

Bookmarks

Posting Permissions