CODEWITHSUNDEEP
csshtmlinternet-explorer-8positionfixed
Jules
Jules

Reputation: 7223

Why is my fixed div appearing below the content in IE8?

I am having a weird problem in IE8 when trying to get a fixed div on top of my screen that hides all other content for a moment.

What actually happens now is that the fixed div appears right below my content. Code snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>...</head>
   <body>
      <table width="50%">...</table>
      <div class="cadre2" style="width: 50%">...</div>

      <div style="z-index: 9999; position: fixed; background-color: #ff0000; width: 100%; height: 100%; top: 0px; right: 0px; left: 0px; bottom: 0px;">This should be on top!</div>
   </body>
</html>

But the result in Internet Explorer 8 is something like this:

____________________
|                  |
|                  |
|     CONTENT      |
|                  |
|__________________|
|                  |
| THIS SHOULD BE   |
|       ON         |
|      TOP!        |
|                  |
|__________________|

Not surprisingly this works absolutely fine in FireFox.

Does anyone have any idea what can be causing this to go wrong in IE8? Can it be any CSS attribute set to any of the preceding HTML? Although I highly doubt this since the fixed div is not nested in any other element apart from the body.

Thanks for your help!

Upvotes: 1

Views: 563

Answers (1)

RJo
RJo

Reputation: 16301

You need to change the doctype definition to 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You can find some explanation at http://webdesign.about.com/cs/doctype/a/aaquirksmode.htm

Upvotes: 1

Related Questions