browser no longer displaying gradient background - css

Question

I'm trying to put a banner image (with transparent section) in a div, over a gradient background that I can change dynamically, and then overlay a table on top of it all.
<div style="margin: 0; padding: 0; width: 796px; position: relative; ">
<img src="LeftSlice.gif" style="margin: 0; padding: 0; position: relative; float: left;">
<div style="margin: 0; padding: 0;
background: -webkit-linear-gradient(white, blue);
background: -o-linear-gradient(white, blue);
background: -moz-linear-gradient(white, blue);
background: linear-gradient(white, blue);
">
<img src="MiddleSlice2.gif" style="margin: 0; padding: 0; position: relative; float: left; z-index: 250; ">
</div>
<img src="RightSlice.gif" style="margin: 0; padding: 0; position: relative; float: left; ">
<table style="padding: 0 20px; width: 796px; position: absolute; left:10px; top:10px; z-index: 500 " >
<tr>
<td valign="bottom" align="left"><img src="IFFUlogo.gif" height="80px" width="200px" ></td>
<td valign="top" align="right">About Us | Register | Login</td>
</tr>
<tr>
<td colspan="2" valign="bottom" align="center" style="padding: 30px 0 0 0; color: white; "><h1>Custer County District High School</h1></td>
</tr>
</table>
</div>
I'm getting no gradient (body bg is showing under transparent portion of the banner .gif)
When I look at the element in Firebug, I get this:
element.style {
background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
I don't think we are allowed to post URLs, but if so, I can do so.

Answer 1

Looks like everything inside your divs is either floating or position:absolute. This will cause the divs to collapse in on themselves, so that you can't see the background. Anytime you float something inside of a container that you want to expand to contain its contents, you either need to insert a clear like this:
<div id="myContainer" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
<div style="clear:left;"></div>
</div>
Or better yet, don't do that, and use a Clearfix instead (See http://nicolasgallagher.com/micro-clearfix-hack/ for accompanying css):
<div id="myContainer" class="cf" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
</div>
For position:absolute, neither option will work, you need to specify a height for the parent in this case.

Answer 2

I tested your CSS gradient code and it works. I see the problem is in the float: left of the image inside the div tag with the gradient background but I don't know what output you wish to see because the image files are not available. Maybe you can post it clearly.