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?
pic1.png
pic2.png
pic3.png

CSSHTML

Last Comment

Tom Beck

8/22/2022 - Mon

elepil

4/12/2015

ASKER

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 Beck

4/12/2015

Cannot reproduce the problem with just the css. Look here.

http://jsfiddle.net/Lumn1t9m/

I added
* { margin:0 auto; padding:0 }
To eliminate the bar at the bottom.

elepil

4/12/2015

ASKER

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.

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

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

ASKER CERTIFIED SOLUTION

Tom Beck

4/13/2015

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

elepil

4/13/2015

ASKER

Wow, Tom Beck, you are damn good at CSS. :) Works like a charm, truly excellent. I thank you!

Tom Beck

4/13/2015

You're welcome. Thanks for the points.