I could not see the source of the ink you postedbut it could be one of the following issues:

1) you have the BG image set to repeat, instead of repeat-x2) you set html{height:100%;} (note you need "{" and "}" ) but not html, body{height:100%;}3) you didnt mat the background color to the color of the end of your gradient

I could not see the source of the ink you postedbut it could be one of the following issues:

1) you have the BG image set to repeat, instead of repeat-x2) you set html{height:100%;} (note you need "{" and "}" ) but not html, body{height:100%;}3) you didnt mat the background color to the color of the end of your gradient

I used "<p>aaa</p>" to signify content, dont worry about keeping that. What you have to understand is the method you are using to generate a gradient BY NECESSITY does the following....1) takes one color for the start of the gradient and another for the end .2) calculates the height of the element ( based on the content)3) creates the gradient ( color changes) to make the fill effect.

The reason you see the "gray bar" is because of margin collapse. That is, your first element inside the element of the has a margin-top >0.

this means is you have little content it will be BY NECESSITY a short dramatic color change, if your content is tall, it will be come a slow subtle gradient.

instead of this:html, body, p { margin:0} do this:

1)look at the source code...2) find the FIRST element inside the <body> with the gradient... ( it's proably an H1 or H2... just make sure it's the first element...)3) give THAT element a margin-top:0;lets say you see something like <body><h1 class="whatever otherclass">DS</h1>... What you need to do is :

html, body{ margin:0}h1.whatever{margin-top:0}

that will get rid of the gray bar.

It's difficult to tell you exactly what needs to be done w/o seeing the actual source code.. but thats the basic concept

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body{
background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
background-image: -webkit-gradient(linear, left top, left bottom, from(
#838357), to( #DCDCDC));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC'); min-height:100%;
;
}
html { background-color:#DCDCDC; height:100%}
html, body { margin:0}
#wrap { width:80%; margin:0 auto; padding-bottom:1em } /* this centers your content*/
.notop{margin-top:0;}
</style>
</head>
<body>
<div id="wrap">
<h1 class="notop"> Sample Page header</h1>
<h2> Some content </h2>
<p> Because of the nature of your CSS3 genrated gradiesnt this is the best you can expect. the gradient genrates fron the top of the container to the bottom (how could it do it otherwise). Short conten will generate a short gradient, long content a long gradient. If you need a gradient of a specific height the best choice i still to use an image</p>
<p> more sample content. bare in mind that the gradient fade will still vary.. that is what a CSS3 generated gradient does. a pixel height gradient need to be made using an image. note that a px based gradient will also get trunked off if your conatiner is too short. </p>
</div>
</body>
</html>

maybe this will serve as a guide. I believe it does what you requested. just remember that CSS3 gradients are flexible, they will by design change with the since of your container. If what you need is a gradient that is always 100px high , for example , you are better off using an image bg.

I did try the above html code and it put a solid bar above the wrapper. Dresden gave me some-other things to work on (removing margin on h1 elements) to remedy that and i have been trying to get that to fix it but no luck yet.