4

I'm facing an odd problem. I have a document with a gradient background color.

<body class="loginbackground">

.loginbackground {
    background: #64889A; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#64889A'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#64889A)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #DCDCDC,  #64889A); /* for firefox 3.6+ */
    width: 100%;
    height: 100%;
}

When first building the page I hadn't set a doctype (yes my bad, but it is still in pre-pre-alpha!)

I added <!DOCTYPE html> to my html file, and bam, the background gradient disappears.

It works fine in Chrome and IE. This is only broken in Firefox. I'm using Aurora (13a0.2). If I remove the line -moz-linear-gradient, then it shows the default background color (no gradient).

Am I doing something wrong or is it actually a bug in Firefox?

** UPDATE ** If I give a background-size: 1000px 1000px then it works, somewhat. I would like to give 100% 100% or auto, but that doesn't work. Giving a fixed size means that it is screen resolution dependent.

1
  • Wait for the next build and see.
    – BoltClock
    Apr 24, 2012 at 17:15

2 Answers 2

4

Your problem is that per spec the gradient sizing box is the box of the element the background style is on. And in standards mode, the height of your body is 0 because you didn't set height: 100% on the <html>. You can see this if you put a border on the body.

1
  • Thanks. I had just found the solution when I saw your reply.
    – aditseng
    Apr 26, 2012 at 15:23
0

Try replacing you css with this variant:

background: -moz-linear-gradient(top, #dcdcdc 0%, #64889a 100%);

The place I go to when I need cross-browser gradient is this: http://www.colorzilla.com/gradient-editor/

1
  • This doesn't work either. I don't have a problem with the gradient per se. It works fine without <!DOCTYPE html>. It's when I add the doctype that the gradient vanishes.
    – aditseng
    Apr 24, 2012 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.