footer overlap in Internet Explorer

[artcase]

I'm not sure how to post the css and corresponding html in this forum yet, so if I make a mistake, let me know.

First, I incorporated a few "fixes" for Internet Explorer to do its job, this one has me confused, however. I'm thinking a margin/padding change would be better and putting the #contentLayer div as full page under everything with padding and another div inside for scrolling would work to fix the error in IE. Am I getting there with that logic?

Here's the website link:
http://www.imageengineering.com/index2.html

Here's the css I'm questioning:

html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:76%;
font-family:Arial;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {
height:100%;
max-height:100%;
background-image:url(../Images/1200pxpagebkg.gif);
background-repeat:repeat-y;
overflow: hidden;
padding:0;
margin:0;
border:0;
}

#contentLayer {
overflow: auto;
position:absolute;
z-index: 1;
top:118px;
bottom:59px;
left:123px;
right:0px;
background:#fff;
}

* html #contentLayer {
top:0;
left:0;
right:0;
bottom:0;
height:100%;
max-height:100%;
width:87%;
overflow: scroll;
position:absolute;
z-index:1;
border-top:118px solid #fff;
border-bottom:59px solid #fff;
border-left:128px solid #fff;
border-right:116px solid #fff;
}

Artcase (aka Amy)

[artcase]

by not doing it the way I have it set up (which results in float overlap of the contentLayer div over the footer) I end up with this "bug" in IE

http://www.positioniseverything.net/explorer/unscrollable.html

doing more research to learn where I need to go.

Amy

[artcase]

Most of the issue comes from having a "position: relative;" in IE's css. I've fixed part of it with a % size modifier, here's the css:

* html #contentLayer {
top:118px;
left:123px;
right:0;
bottom:0;
height:71%;
max-height:100%;
width:81%;
overflow:auto;
position:absolute;
z-index:1;
border-bottom:58px solid #fff;
}

Amy