footer div covers text and image

ie stacking conflict

[icky_thump]

Hi all,

I've exhausted everything I have but cannot figure this out.

At the bottom, the footer and gradient work fine in all things Mac and in WinDohs! for FF and Safari. Good old IE6 & IE7 don't display the same though.
The gradient goes behind the line of legal text and the 'parade' box, but in IE those get covered by the gradient.

Any suggestions as to how I can solve this conflict?
Thanks for your input.
Probably easier if you ask me to stickmail you a link, but for now...
Here's a portion of the HTML with the relevant CSS below:

<!-- Main Body -->
<div id="mainContent">
<p class="phone" align="right">1.800</p>
<div class="mainsub">
<div id="feature">
<p>Energ </p>
<p>Progressive</p>
</div>
<div id="flex">
<div id="message">
<p>We're </p>
</div>
<div id="main">
<h2>Main</h2>
<p>Energ</p>
</div>
<div id="second">
<h2>Sub</h2>
<p>Energ</p>
</div>
<div id="parade">
<p>Parade</p>
</div>
</div>
</div>
</div>
<!-- end Main Content -->

<br class="clearfloat">

<div id="base">
<div id="legal">
<p align="center"><br>
Legal Line of Text<br><br>
</p>
</div>

<!-- #fade -->
<div id="fade">
<p>&nbsp;&nbsp;</p>
</div>
<!-- end #fade -->

<div id="footer">
<p>&nbsp;&nbsp;© Copyright 2007</p>
</div>
<!-- end #footer -->
</div>
<!-- end #base -->

CSS:
.thrColLiqHdr #mainContent {
margin: 0 auto;
width: 800px;
display:block;
font-family:Helvetica,Arial,Verdana,sans-serif;
}

.mainsub #base {
margin:0;
padding: 10px 0px 0px 0px;
width: 100%;
_height:300px;
text-align: center;
float:left;
}

.thrColLiqHdr #fade {
padding: 0;
background:transparent url(images/footfade.gif) repeat-x bottom left;
margin:-240px 0 0 0;
height:240px;
width:100%;
z-index:1;
}

.thrColLiqHdr #footer {
padding: 0;
background:#003381;
margin:0 auto;
border-top: 3px solid #ff1000;
color:#CCCCCC;
font-family:Helvetica,Arial,Verdana,sans-serif;
height:40px;
width:100%;
}
.thrColLiqHdr #footer p {
margin:0 auto;
padding: 10px 10px;
width:800px;
font-family:Helvetica,Arial,Verdana,sans-serif;
text-align: center;
font-size: 10px;
}

.thrColLiqHdr #legal {
margin:0 auto;
padding:0px;
width:800px;
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size: 10px;
}

.mainsub #feature {
margin: 5px 5px 5px 0px;
padding: 10px 10px 10px 10px;
width: 190px;
float: left;
min-height: 500px;
border: #003381 1px solid;
background-color: #FFFFFF;
}
.mainsub #message {
margin: 5px 0px 5px 5px;
padding: 10px 10px 10px 10px;
border: #003381 1px solid;
float: left;
width: 554px;
background-color: #FFFFFF;
}
.mainsub #main {
margin: 5px;
padding: 10px 10px 10px 10px;
border: #003381 1px solid;
float: left;
width: 259px;
min-height: 300px;
background-color: #FFFFFF;
}
.mainsub #second {
margin: 5px;
padding: 10px 10px 10px 10px;
border: #003381 1px solid;
float: left;
width: 259px;
min-height: 300px;
background-color: #FFFFFF;
}
.mainsub #parade {
margin: 5px;
padding: 10px 10px 10px 10px;
border: #003381 1px solid;
background-color: #FFFFFF;
float:right;
width: 551px;
height: 120px;
text-align: center;
}

[SuzyUK]

an idea..

use a negative z-index For IE Only,

#base #fade {
background: #dad;
margin: -240px 0 0 0;
height: 240px;
*position: relative; /* a hack or conditional, but feed this rule to IE Only */
z-index: -1; /* z-index can be left in main sheet as it will be ignored by others if they don't get a position rule, but if using conditional comment likely best to keep it separate too */
}

IE, apparently likes to be told specifically that you want the negative top margin to slide under and backwards (on the z-plane)?

-Suzy

[icky_thump]

SuzyUK, you are the big winner!
Thank you so much!

Not sure what the #dad was on background, but I replaced it with my image repeat-x background and it filled it in. Awesome.