CSS Gradient issue when browser is resized

I have attached three images to demonstrate the problem. (Pardon the blotchiness, I had to remove the company name.) For the three pics, please focus on the bottom of the browser.

Pic1 is how the gradient on the background looks normally.

Pic2 shows the browser now resized to a lesser height, notice how the vertical scroll bars now appear to the right.

Pic3 shows what it looks like after the vertical scroll bars have been scrolled down.

When the browser is maximized or restored, the gradient would still look fine. It's only when the browser is manually resized in this fashion that this issue comes up.

Can anyone tell me how to correct this please?
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

elepilAuthor Commented:
Oh sorry, I forgot to put the CSS style that I'm using:

html {
    min-width: 300px;
    height: 100%;

body {
    opacity: 0;
    height: 100%;
    background:#7BA0DF; /* This is for older browsers that don't support gradients */
    background: -webkit-linear-gradient(#7BA0DF,#123456) no-repeat, #7BA0DF; /* Safari 5.1+, Chrome 10+ */
    background: -moz-linear-gradient(#7BA0DF,#123456) no-repeat, #7BA0DF; /* Firefox 3.6+ */
    background: -o-linear-gradient(#7BA0DF,#123456) no-repeat, #7BA0DF; /* Opera 11.10 */
    background: -ms-linear-gradient(#7BA0DF,#123456) no-repeat, #7BA0DF;
    background: linear-gradient(#7BA0DF,#123456) no-repeat, #7BA0DF; /* the standard */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7BA0DF', EndColorStr='#123456'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7BA0DF', endColorstr='#123456')"; /* IE8+ */

Open in new window

Tom BeckCommented:
Cannot reproduce the problem with just the css. Look here.


I added
* { margin:0 auto; padding:0 }
To eliminate the bar at the bottom.
elepilAuthor Commented:
Tom, I don't think you can test my issue in jsfiddle. Add the code below along with the CSS. Sorry, I left that one out. You should now be able to get the vertical scrollbar easily and replicate the problem.

    <div style="width: 500px, height:400px; border: 1px solid yellow;"></div>

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tom BeckCommented:
I was able to replicate the problem in jsfiddle and modify the css to make it work.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
Wow, Tom Beck, you are damn good at CSS. :) Works like a charm, truly excellent. I thank you!
Tom BeckCommented:
You're welcome. Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.