Problems with Footer - IE6 adding space below image ??

slimboyfatz32 · February 29th, 2008, 07:35 AM

I have a standard layout and in my HTML the code is as follows ...

Code:

 
<div id="footer">
     <p>&copy; 2008 Blah Blah | design by me</p>
   </div>

my CSS is ...

Code:

 
body {
 text-align : center;
 background-color: #797777;
 }
 
#wrapper {
 width : 900px;
 text-align : left ;
 margin-left : auto ;
 margin-right : auto ;
 
 border: 1px solid #fff;
 }
 
#header {
 padding-top: 10px;
 
 background: url(images/header.png);
 
 height: 158px;
 }
 
#header img {
 
 display: block;
 
 } 
 
#content {
 float: left;
 width: 598px;
 
 background: url(images/main.png);
 
 height: 796px;
 }
 
#sidebar {
 float: right;
 width: 302px;
 
 background: url(images/sidebar.png);
 
 height: 796px;
 }
 
 
/* ----- Navigation -----  */
 
#nav {
 float: right;
 padding: 0 0 2px 15px;
 margin: 0;
 }
 
#nav ul {
 margin: 0;
 padding: 0 0 0 30px;
 list-style: none;
 }
 
#nav li {
 float: left;
 margin: 0;
 padding: 0 20px 0 0;
 }
 
#nav li a {
 float: left;
 text-align: center;
 margin: 100px 0 0 0;
 padding: 4px 12px;
 font-weight: bold;
 text-decoration: none;
 color: #f1f7ee;
 }
 
#nav li a:hover {
 color: #444;
 
 background: #f1f7ee;
 }
 
#nav li a.active {
 color: #444;
 background: #f1f7ee;
 }
 
 
/* ----- Typography ----- */
 
body {
 font: small Verdana, Arial, Geneva, Sans-serif;
 line-height: 1.6em;
 color: #444;
 }
 
h1 {
 padding-top: 10px;
 font-size: 1.2em;
 color:#422100
 }
 
h2 {
 font-size: 1em;
 font-style: normal;
 color: #422100;
 }
 
 
 
h3 {
 font-size: 0.7em;
 font-style: normal;
 color: #fff;
 }
 

/* ----- Links ----- */
 
a {
 color: #f96;
 }
 
a:visited {
 color: #422100;
 }
 
a:hover {
 color: #422100;
 }
 
#footer a {
 color: #333;
 text-decoration: none;
 }
 
#footer a:visited {
 color: #333;
 text-decoration: none;
 }
 
#footer a:hover {
 color: #422100;
 text-decoration: underline;
 }
 

/* ------ Footer ----- */
 
#footer {
 background: url(images/footer.png);
 
 height: 46px;
 text-align: center;
 clear: both;
 color: #fff;
 }

at present my Copyright text sits at the top of the Footer Div , when i try to center it horizontally it's fine (in IE7 FF etc...) but in IE6 it strangely adds a gap at the bottom of the Footer Div ???
help greatly appreciated

danny322 · February 29th, 2008, 07:45 AM

I think that may be because your text is inside a <p> tag. Just put your text in another div and add some padding top. Something like.....

HTML

Code:

<div id="footer">
<div is="footer_text">&copy; 2008 Blah Blah | design by me</div>
</div>

CSS

Code:

#footer {
 background: url(images/footer.png);
 height: 46px;
 clear: both;
 color: #fff;
 }

#footer_text {
 font: small Verdana, Arial, Geneva, Sans-serif;
 line-height: 1.6em;
 color: #444;
 text-align: center;
 padding-top: 20px; <----or something near to put it vertically center
 }

That should solve it hopefully.

Also add this to your css at top.....

Code:

*{
margin: 0;
padding: 0;
}

slimboyfatz32 · February 29th, 2008, 08:13 AM

thanks for that buddy , worked a treat ... the only problem now , i have just noticed my header is doing the same damn thing?!?! in both IE6 and 7 !!!! damn damn !!

**resolved .. just took the 10px padding from my #header**