Menu
This code (which is a working snippet from actual pages) works as expected on Safari & Firefox and, on one virtual host on IE7 & 8 as well, but when it is moved to another host the 'fixed' position is ignored on IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<style type="text/css">
.alrtfrnt { background-color:gray;}
.alrtfrnt { position:fixed;top:33%;left:33%;height:150px;width:300px;z-index:9;}
</style>
</head>
<body>
<div class='alrtfrnt'></div>
</body>
</html>
If the 'fixed' is changed to 'absolute' then it is works fine, but that is not the requirement.
It is not likely to be a cacheing issue because this started out with 'real' pages and has continued through some entirely new pages. I have also changed the colour on the block to make sure that is being picked up and set IE to check for updates on every page visit.
I am at a loss as to why exactly the same code should display in a different fashion depending on the server, so any clues as to the next thing I can check or change would be appreciated.
949
Let's call your two hosts A and B:
Host A - Everything works fine.
Host B - It's screwed, and position: fixed does not work.
The problem is almost certainly that IE is displaying Host B in Quirks Mode.
You can verify this by hitting F12, and looking at the Document Mode.
position: fixed) won't work.Here's a guide to determine exactly why Internet Explorer is reverting to Quirks Mode:
If that seems a little too complicated, you can (in almost all cases) force the correct Document Mode by adding this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
If it helps, some other answers I've written about the same thing:
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
