CODEWITHSUNDEEP
htmlcssbackgroundgradient
kamaci
kamaci

Reputation: 75137

Background gradient ends and doesn't continue

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: enter image description here

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?

Upvotes: 0

Views: 907

Answers (3)

Vipul Pawsakar
Vipul Pawsakar

Reputation: 81

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!

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21191

Okay, took me a bit to find this, but here's your answer: https://developer.mozilla.org/en/CSS/-moz-linear-gradient. Check out the 'Notes' section. Essentially, it's a "bug" wherein the background won't fill the entire container by default.

Basically, use the edit suggested by @Jonas G. Drange (change the last value to 100%), and then add a new rule to the CSS sheet:

html /*<-- or whatever the container element is */
{
    min-height:100%;
}

Viola.

Upvotes: 0

Jonas G. Drange
Jonas G. Drange

Reputation: 8845

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

What happens if you remove the 400px limit?

Upvotes: 1

Related Questions