PDA

View Full Version : 1px Gap below Footer - IE6



pinkshiro
Nov 25th, 2006, 05:10 AM
Hi there,

I've been trying to find a solution on the web, but I can't seem to find a decent solution to my problem. I've got a 1px gap under my absolutely positioned footer div. Only in IE 6 though (haven't tested in IE7 yet).

My first solution was to add a negative bottom margin to the div, which works fine, but in Firefox, causes the vertical scrollbar to appear because there is 1px of scrolling to be done.

Here's my footer css & Html:


<div style="clear:both;">&nbsp;</div>
<div id="footer">
<div id="footerleft">Bookings | Packages | Franchise Information | Gallery | About Us | Contact Us</div>
<div id="footerright"> 2006 FlightExperience. All Rights Reserved.</div>
</div>


#footer
{
border-top:3px #fff solid;
position: absolute;
margin-bottom: -1px;
bottom:0px;
background-color:#a1a1a1;
height:25px;
}

div#footerleft {
width:396px;
float:left;
height: 15px;
color:#000;
}

div#footerright {
width:390px;
float:right;
text-align:right;
height: 15px;
color:#000;
}

Footer sits inside a wrapper div, which wraps all content. here's css for html, body and wrapper:


html,body {
height: 100%;
width: 100%;
}

html,body {
margin: 0;
padding: 0;
}

body {
text-align: center;
background-color:#a1a1a1;
}

div {
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

div#wrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width:792px;
text-align:left;
padding:0px;
background-color:#FFFFFF;
min-height: 100%;
height: 100%;
background-image:url(images/background.gif);
background-repeat:repeat-y;
}

html>body #wrapper {
height: auto;
}

please help

Arbitrator
Nov 25th, 2006, 07:18 AM
Tried conditional comments (http://www.quirksmode.org/css/condcom.html) yet?