Why doesn't this small HTML/CSS snippet produce the expected results in IE?

Question

You can save the code below and try it out.

In firefox,it's full browser grey,but in IE(IE7 to be exact),it's not working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style text="text/css">
.overlay {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
}
</style>
</head>
<body style="font-size:62.5%;">

<div class="overlay"></div>

</body>
</html>

John Feminella · Accepted Answer · 2010-02-07 15:07:12Z

4

IE doesn't recognize the CSS color name grey. Try using a hex color, e.g., #ccc, and it will work. Alternatively, using gray (with an 'a', not an 'e') also works.

Note that this is standards-compliant, because W3C doesn't say anything about supporting alternate spellings of gray, and gray is indeed the color name according to the spec for CSS3.

answered Feb 7, 2010 at 15:07

John Feminella

313k49 gold badges348 silver badges362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2010-02-07 15:07:44Z

0

Try adding this to your style defs:

html, body {
    height: 100%;
}

On IE, body doesn't extend the full height of the viewport by default, and your overlay's container is body, so...

Edit Just tried it, and yours worked without the above, must be because body is statically positioned. Anyway, John Feminella figured it out; see his answer.

answered Feb 7, 2010 at 15:07

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

Why doesn't this small HTML/CSS snippet produce the expected results in IE?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related