Question

I have a div under my body element. It has that background CSS:

-moz-linear-gradient(center top , #000000 0%, #30FF40 400px) repeat scroll 0 0 transparent

Inside of my div there is a datatable (a jqGrid table). I think after my page loads that grid table gets a space on my page. So my gradient background ends up somewhere and bottom of my page has a whitespace(other pages doesn’t have datatables are OK).

How can I solve that?

EDIT:

My problem is like that:

PS:

I found which causes it. I have a div element that includes my datatable:

<div id="cont">
...
</div>

When I open my webpage it becomes like:

<div id="cont" style="height: 602px;">
...
</div>

I changed the #cont styles to height:auto etc. but something overrides it even I write an inline CSS definition. It has a CSS like:

#cont {
  min-height: 100%;
  margin: 0 auto;
  min-width: 960px;
  max-width: 80%;
}

Any ideas?

Answer 1

Updated my Answer as well 🙂 Some Jquery is applying height to your ID #cont

<style type="text/css">
html, body{ margin:0px; padding:0px; background: #fff; min-width:300px/*480px*/; height:100%;}
.yourClass
{
margin:0; padding:0; display:block; overflow:hidden;
    background: #444444;    background-repeat:repeat;
    background: -moz-linear-gradient(center top, #8db849, #444444);
    width:100%; min-height:100%; 
}
#cont {
  height:320px;/*Assumed height by Jquery / whaterver, you can remove while real time*/
  margin: 0 auto;
  min-width: 960px;
  max-width: 80%;
  background:#0099CC;
}
</style>



<div class="yourClass">
    <div id="cont">
    ...
    </div>
</div>

It works for me, cheers!