Forum Moderators: not2easy
<!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" /><style type="text/css">
#footer {
border-top: 1px solid #333;
padding: 10px;
color: #333;
clear: both;
text-align: left;
background: #ccc;
}#footer p {
border: 1px solid #000;
background: #fff;
}</style>
<title>title</title>
</head>
<body>
<div id="footer"><p>Here's the footer stuff</p></div>
</body>
</html>
Try removing it, and if that doest work, please post some more of your code especially if there are any parents to the #footer div.
<added>Or it might be because the default height of a div according to IE6/win is sometimes larger than what you want. Specify a height and a line-height and see what happens. It could also be the p in your footer div that has a default margin, try removing that as well:
#footer p {margin:0; padding: 0;}
#footer p { margin-bottom: 0; }
will remove it.
Also consider that line-height will also effect the positioning of your text.
<!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" /><style type="text/css">
body {
background: #ccc;
color: #333;
margin: 0;
padding: 0;
border: 0;
text-align: center;
font-family: verdana;
font-size: 11px;
padding-bottom: 20px;
}#wrapper {
background: #fff;
color: #333;
margin: 10px auto;
padding: 0;
border: 1px solid #333;
width: 702px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 700px;
}#header{
background: #333;
color: #333;
border: 0;
margin: 0;
padding: 0;
text-align: left;
}#header img {
margin: 0;
padding: 0;
}#pagebody {
padding: 0;
margin: 0;
border: 0;
text-align: left;
color: #333;
background: #fff;
clear: both;
}#maincontent {
float: left;
margin: 0 0 10px 0;
border-right: 1px solid #ccc;
padding: 10px;
width: 441px;
background: transparent;
}#sidebar {
position: relative;
background: transparent;
color: #333;
padding: 0 10px 0 10px;
margin: 0 0 0 461px; /* 441 + 10 + 10 = #maincontent */
}#footer {
border-top: 1px solid #333;
padding: 10px;
margin: 0;
color: #333;
clear: both;
text-align: left;
background: #ccc;
}#footer p {
border: 1px solid #000;
background: #fff;
margin: 0;
padding: 0;
}</style>
<title>title</title>
</head>
<body>
<div id="wrapper">
<div id="pagebody">
<div id="maincontent">
<h1><a href="/">Title of the article</a></h1>
<h2>By <a href="/">Author Name</a></h2>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Just enough to fill the layout...</p>
</div>
<div id="sidebar"><p>sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar</p><p>sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar. Just enough</p></div>
</div>
<div id="footer"><p>footer stuff</p></div>
</div>
</body>
</html>
this is related to float bugs although this actual "bug" is one I've not heard about (or at least can't connect it) yet! :)
The top padding is actually doubling itself (apart from the fact it obviously thinks 2 x 0 = 1.. hehe), try different values to see it happening
there are 2 x ways to fix it.. the quick 'n' dirty way is to declare an explicit width on the footer div ~ 702px - required left/right padding ~ (this helps IE only but seeing as how that's the one with the problem...)
(this is where an IE "hacked" height of 1px would also fix the same thing if you couldn't use width)
or:
the correct way according to recommendations/compliant browsers is to float the #pagebody div (this will make it stretch to clear the floated content properly)
#pagebody {
padding: 0;
margin: 0;
border: 0;
text-align: left;
color: #333;
background: #fff;
float: left;
width: 100%;
}
pick your poison ;) and sorry for not noticing before I only tested the floats
you still need the default <p> margins set to 0 as well though as advised above
Suzy
