1. Home
  2. Forums Index
  3. Browser Side / CSS 6:27 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Padding issue in IE versus Firefox

Approx 10 extra pixels of padding and I don't know why

         

classa

4:52 pm on Oct 21, 2009 (gmt 0)

10+ Year Member



I am working on a new design for a site and I am making an attempt to do it with all css. I am having a problem with a spacing issue between a white body div (#whitebody) area of the site and an area with a fixed dimension graphic backer (#latest). There seems to be 10 extra pixels of spacing between the two divs and I can't figure out where it is coming from.

The css is as follows; 


/* CSS Document */
/*-- BODY --*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5C5C5C;
background-color: #065cd5;
background-image: url(../images/upperwaves.jpg);
background-repeat: no-repeat;
background-position: top center;
margin:0;
padding:0;
text-align:center;
}
/*-- CLOUDS AT BOTTOM --*/
#cloudsbottom {
background-image: url(../images/lowertrees.jpg);
background-position: bottom center;
background-repeat: no-repeat;
}
#container {
width: 970px;
margin: 20px auto 0px auto;
text-align: left; /* this overrides the text-align: center on the body element. */
}
/*--Old Content Css --*/
#mainbodywraptop {
float: left;
background: url(../images/bluebodystripestop.png) top center no-repeat;
padding-top:15px;
padding-bottom:0px;
}
#mainbodywrapbot {
float: left;
background: url(../images/bluebodystripesbottom.png) bottom center no-repeat;
padding-top:0px;
padding-bottom:15px;
}
#mainbody {
float: left;
padding: 0px 0px 0px 0px;
width: 710px;
text-align: left;
background-image: url(../images/bluebodystripes.png);
background-repeat: repeat-y;
}
#rhbodywraptop {
float: right;
background: url(../images/rhbluebodystripestop.png) top center no-repeat;
padding-top:15px;
padding-bottom:0px;
}
#rhbodywrapbot {
float: right;
background: url(../images/rhbluebodystripesbottom.png) bottom center no-repeat;
padding-top:0px;
padding-bottom:15px;
}
#rhbody {
float: right;
padding: 0px 0px 0px 0px;
width: 260px;
text-align: left;
height: 800px;
background-image: url(../images/rhbluebodystripes.png);
background-repeat: repeat-y;
}
#rhnavwraptop {
float: right;
background: url(../images/bluerhnavbackertop.png) top center no-repeat;
padding-top:15px;
padding-bottom:0px;
}
#rhnavwrapbot {
float: right;
background: url(../images/bluerhnavbackerbot.png) bottom center no-repeat;
padding-top:0px;
padding-bottom:15px;
}
#rhnav {
float: right;
padding: 0px 0px 0px 0px;
margin: 0px 10px 0px 10px;
width: 240px;
text-align: left;
height: 760px;
background-image: url(../images/bluerhnavbackermid.png);
background-repeat: repeat-y;
}
#mainpicturebackerwraptop {
float: left;
background: url(../images/mainpicturebackertop.png) top center no-repeat;
padding-top:10px;
padding-bottom:0px;
}
#mainpicturebackerwrapbot {
float: left;
background: url(../images/mainpicturebackerbot.png) bottom center no-repeat;
padding-top:0px;
padding-bottom:10px;
}
#mainpicturebacker {
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 10px 0px 10px;
width: 690px;
text-align: left;
height: 210px;
background-image: url(../images/mainpicturebackermid.png);
background-repeat: repeat-y;
}
#whitebodywraptop {
float: left;
background: url(../images/whitebodytop.png) top center no-repeat;
padding-top:15px;
padding-bottom:0px;
}
#whitebodywrapbot {
float: left;
background: url(../images/whitebodybot.png) bottom center no-repeat;
padding-top:0px;
padding-bottom:15px;
}
#whitebody {
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 10px 0px 10px;
width: 690px;
text-align: left;
height: 500px;
background-image: url(../images/whitebodymid.png);
background-repeat: repeat-y;
}
#latest {
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 10px 0px 10px;
width: 690px;
height: 250px;
background-image: url(../images/latest.png);
background-position: left top;
background-repeat: no-repeat;
}
/*-- FOOTER --*/
#containerfooter {
margin: auto;
width: 100%;
background-image: url(../images/grassbottom.jpg);
background-color: #3AB9C7;
background-position: center top;
background-repeat: repeat-x;
}

The html is as follows; 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="images/waveslayout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scroll/gallerystyle.css"/>
<script type="text/javascript" src="scroll/jquery.js" language="javascript"></script>
<script type="text/javascript" src="scroll/smoothscroll.js" language="javascript"></script>
<script type="text/javascript" src="scroll/gallery2.js"></script>
<script src="hover.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<!-- WAVES AT BOTTOM -->
<div id="cloudsbottom">
<!-- CONTAINER -->
<div id="container">
<!--header--> 
 <div id="homeHeader">
 
 <div id="homeHeaderLogo"> <a href="#"><img src="/images/bluesunonly.png" alt="specifics removed" border="0"/></a> 
 </div>
 </div>
<!--header--> 
 <!-- mainbody left-->
<div id="mainbodywraptop">
<div id="mainbodywrapbot">
<div id="mainbody">
<!--main picture backer-->
<div id="mainpicturebackerwraptop">
<div id="mainpicturebackerwrapbot">
<div id="mainpicturebacker"></div>
<br style="clear: both">
</div>
</div>
<!--main picture backer-->
<!--white body backer-->
<div id="whitebodywraptop">
<div id="whitebodywrapbot">
<div id="whitebody"></div>
<br style="clear: both">
</div>
</div>
<!--white body backer--> 
<!--latest additions backer-->
<div class="clear"></div>
<div id="latest">a</div>
<div class="clear"></div>
<!--latest additions backer-->
</div>
<br style="clear: both">
</div>
</div>
<!--mainbody left-->
 <!-- mainbody right-->
<div id="rhbodywraptop">
<div id="rhbodywrapbot">
<div id="rhbody">
<div id="rhnavwraptop">
<div id="rhnavwrapbot">
<div id="rhnav"></div>
<br style="clear: both">
</div>
</div>
</div>
<br style="clear: both">
</div>
</div>
<!--mainbody right-->
</div>
<div id="clear"></div>
<!-- / CONTAINER -->
</div><!-- / CLOUDS AT BOTTOM -->
<!-- FOOTER -->
<div id="containerfooter">
<!-- FOOTER TOP -->
 
<div id="footercontenttop">
<div id='navcolumn' class='subnav'>
<a href='#' class='white'>specifics removed</a></li><br>
<ul class='footerul'>
<li class='footerli'><a href='#'>specifics removed</a></li>
<li class='footerli'><a href='#'>specifics removed</a></li>
<li class='footerli'><a href='#'>specifics removed</a></li>
<li class='footerli'><a href='#'>specifics removed</a></li>
<li class='footerli'><a href='#'>specifics removed</a></li>
<li class='footerli'><a href='#'>specifics removed</a></li>
</ul>
</div>
<div id="clear"></div>
</div>
 <!-- FOOTER TOP -->
 <!-- FOOTER BOTTOM -->
 <!-- / FOOTER BOTTOM -->
</div>
<!-- / FOOTER -->
</body>
</html>

[edited by: swa66 at 10:06 pm (utc) on Oct. 21, 2009]
[edit reason] Specifics removal, please see ToS and Forum Charter [/edit]

Wlauzon

6:27 pm on Oct 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



When you say IE, you need to provide the version. A lot of problems are IE6 specific, for example.

classa

7:36 pm on Oct 21, 2009 (gmt 0)

10+ Year Member



Wlauzon,

Thanks for the quick reply. I have recently downloaded IE8 (I use Firefox by default) and I am seeing that issue with IE8. I am confident that this issue would exist in older versions as well.

rocknbil

10:36 pm on Oct 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<div id="clear"></div>

Probably unrelated, but this isn't clearing like you want it to, you want <div class="clear"></div> like your other clearing elements.

StoutFiles

11:10 pm on Oct 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



you want <div class="clear"></div> like your other clearing elements.

Correct, only use an id if you're going to use it once. Otherwise use a class.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:27 pm May 1, 2026