CODEWITHSUNDEEP
htmlfirefoxgoogle-chromecss
Lockhead
Lockhead

Reputation: 2451

CSS 3 gradient not working on chrome/firefox

<html>
<head>
<style type="text/css">
    *{padding:0;margin:0;}
    body{
        background: -webkit-gradient(
            linear,
            right bottom,
            left top,
            color-stop(0.25, #F5A432),
            color-stop(0.63, #F0F050)
        );
        background: -moz-linear-gradient(
            right bottom,
            #F5A432 25%,
            #F0F050 63%
        );
    }

    .box{margin-left: 33px; width:100px; height: 100px; background-color:rgb(69,69,69); border: 1px solid rgb(56,56,56);border-radius: 25px; float:left}
    #container{padding-left: 37%; padding-right: 30%; width: 1000px; background-color: rgb(64,64,64); position:fixed}
</style>
</head>
<body>
    <div id="container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</body>
</html>

No gradient is showing in the code above! Just a plain white background. Why?

Upvotes: 0

Views: 2980

Answers (2)

Volzy
Volzy

Reputation: 225

I tested your code in Chrome (version 12.0.742.100) and it works as intended.

The Firefox code doesn't work and it's because of margin: 0; on body. The bug has been reported @ https://bugzilla.mozilla.org/show_bug.cgi?id=509681.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228182

The only element inside body (#container) has position: fixed.

An element with position: fixed is removed from normal flow, so the body has no height.

You can "fix" this with:

html {
    height: 100%
}
body {
    min-height: 100%
}

See: http://jsbin.com/alucix

Upvotes: 5

Related Questions