Emulating position:fixed CSS property under IE7

Recently I've been figting with IE7 to act like Mozilla Firefox and allow position:fixed CSS properties to work properly. As I'm using PHP, I had to come up with a complex solution that worked correctly on both modern browsers. Since the CSS fix for IE7 is incompatible with Firefox I had to split the CSS in two by testing the user agent in PHP. The details are in the code:

<?PHP
 
// this script simply searches for a substring in HTTP_USER_AGENT
function inAgent($agent) {
 global $HTTP_USER_AGENT;
 $notAgent = strpos($_SERVER['HTTP_USER_AGENT'],$agent) === false;
 return !$notAgent;
}
 
?>
<HTML>
<HEAD>
<!-- I'm using inline CSS here - for convenience -->
<style type="text/css">
 
/* universal for both MSIE and Firefox */
body {
  background-color:#AAFFAA;
  background: #AAFFAA url(foo) fixed;
}
 
<?PHP if(inAgent("MSIE")) { // MSIE CSS follows ?>
* html div#fixme { /* this div ID sticks to the top of the browser window */ 
	position: absolute;
	top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
	background-color:#AAFFAA;
	width:110%;
	height:160px;
	overflow:auto;
	margin:0;
	padding:5px;
	left:0;
	right:0;
}
* html div#fixme2 {/* this div ID also sticks to the top of the browser window */ 
	position: absolute;
	top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
	z-index:100;
	right:0
}
 
* html div#fixme-bottom {/* this div ID sticks to the bottom of the browser window */ 
	position: absolute;
	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop+(document.body.clientHeight-this.clientHeight));
	left:0;
	background-color:#AAFFAA;
	width:100%;
	height:30px;
	overflow:auto
}
 
 
<?PHP } else { // now the same CSS definitions for Firefox...  ?>
html div#fixme {
	position:fixed;
	top:0;
	background-color:#AAFFAA;
	/*width:100%;*/
	height:160px;
	overflow:auto;
	margin:0;
	padding:5px;
	left:0;
	right:0;
}
 
html div#fixme2 {
	position:fixed;
	z-index:100;
	top:0;
	right:0
}
 
html div#fixme-bottom {
	position:fixed;
	bottom:0;
	left:0;
	background-color:#AAFFAA;
	width:100%;
	height:30px;
	overflow:auto
}
 
<?PHP } ?>
 
</style>
</HEAD>
<BODY>
<DIV id=fixme2> <!-- a simple persistent logout button -->
    <FORM method=POST>
        <INPUT type=submit name='logout' value='Kilépés X'>
    </FORM>
</DIV>
 
<div id=fixme>
  <!-- instructions for the exam comes here -->
</div>
<div style='z-index:-1;position:absolute;top:160px;left:0;background-color:#EEFFEE;width:100%;padding:5px;'>
  <!-- the exam questions, positioned to fit under the instructions -->
</div>
<div id=fixme-bottom>
  <!-- simple post button goes here and stays on the bottom of the screen -->
</div>
 
</BODY>

Also see:

bugfix, ie7, html, php

Linkbacks