Within the body element, I have a div with a background CSS that looks like this:
-moz-linear-gradient(center top , #000000 0%, #30FF40 400px) repeat scroll 0 0 transparent
Inside this div is a datatable (jqGrid table). However, once the page loads, the grid table seems to be taking up space on the page causing my gradient background to end abruptly and leaving whitespace at the bottom of the page (other pages without datatables are fine).
How can I resolve this issue?
EDIT:
The problem persists:
PS:
I have identified the source of the problem. There is a div element containing the datatable:
<div id="cont">
...
</div>
Upon webpage load, it appears as:
<div id="cont" style="height: 602px;">
...
</div>
I tried altering the styles of #cont to height:auto, but something keeps overriding it, even when using inline CSS. The CSS for #cont includes:
#cont {
min-height: 100%;
margin: 0 auto;
min-width: 960px;
max-width: 80%;
}
Any suggestions on how to tackle this issue?