IE leaves gap at bottom of page

I have a simple layout which uses a repeating image to create a coloured column down the left hand side of the screen, and a div with a solid background colour positioned after the content div to create a footer.

All content is larger than any potential screen height, so the footer should always appear at the very bottom of the screen.

In Opera and Firefox, the footer is at the very bottom making a tidy L shape with the left hand column. However, Internet Explorer positions it about 1em from the bottom, leaving a white gap underneath.

*********************
Sample code:
CSS
body{
background: url('akpr-background-line.gif');
background-repeat: repeat-y;
font-family: Arial, sans-serif;
font-size: 0.8em;
z-index: 1;
}

#content{
position: relative;
width: 80%;
}

#footer{
position: relative;
width: 80%;
color: #FFF;
background: #009E56;
height: 5em
float: left;
}

HTML
<body>
<div id="content">

Blurb.

</div>

<div id="footer">
Footer text
</div>

</body>

IE leaves gap at bottom of page

Opera and Firefox don't...

smellystudent

smellystudent

ItsCosmo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week