asked on

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

elepil

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

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

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

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elepil

ASKER

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

Tom Beck

You're welcome. Thanks for the points.