<select> behaving strangely

I've got a page footer that should always be placed at the bottom of the browser window. No problem in Safari, Moz, Opera etc, but due to IE:s non-support for position:fixed I have to use javascript to position the div in question. Also, to make <select>:s appear below the <div> in IE I have placed a transparent IFrame directly underneath the <div>. So far so good, works like a charm on my machine (WinXP SP2, IE6). But on a whole bunch of other machines the <select>:s behave very strangely when the page is scrolled. They start flashing or disappear completely.
Has anybody encountered this problem before? Is there a solution?

Please try the code below in IE and report whether it works or not. And please let me know what operating system and browser version you are using.

Thanks,
/Henrik


<html>
<head>
<script language="javascript">var daActionsHeight = null;
function getActionsHeight()
{
if(daActionsHeight==null)
{
daActionsObj = document.getElementById("daDiv");
daActionsHeight = daActionsObj.clientHeight;
return daActionsHeight;
}
else
{
return daActionsHeight;
}
}
</script>
</head>
<style>
body {font-family:verdana;}
.fixedbottom-iframe
{
display:block;
position:absolute;
top:expression(body.scrollTop + body.offsetHeight - getActionsHeight() - 10 + "px");
height:expression(getActionsHeight() - 0 + "px");
width:expression(document.getElementById("daDiv").offsetWidth + "px");
left:15px;
right:15px;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
z-index:0;
}
.fixedbottom-container 
{
position:absolute;
z-index:200;
top:expression(body.scrollTop + body.offsetHeight - getActionsHeight() - 10 + "px");
left:15px;
right:15px;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
background-color:maroon;
color:white;
padding:10px;
border:2px dashed black;
}
</style>
<body>
<iframe src="about:blank" class="fixedbottom-iframe" id="daIFrame"></iframe>
<div id="daDiv" class="fixedbottom-container">
Some stuff here... Some stuff here... Some stuff here... Some stuff here... Some stuff here... 
</div>
<form>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p>
<p>
<select>
<option value="1">English</option>
<option value="2">Swedish</option>
</select>
</p></form>
</body>
</html>

<html> <head> <script language="javascript">window.attachEvent('onload', recalcPositions); window.attachEvent('onresize', recalcPositions); window.attachEvent('onscroll', recalcPositions); var daDivHeight = null; function getDivHeight() { if(daDivHeight==null) { daDivObj = document.getElementById("daDiv"); daDivHeight = daDivObj.clientHeight; return daDivHeight; } else { return daDivHeight; } } function recalcPositions() { daDivObj = document.getElementById("daDiv"); daDivObj.style.top = document.body.scrollTop + document.body.offsetHeight - getDivHeight() - 10; daIFrameStyleObj = document.getElementById("daIFrame").style; daIFrameStyleObj.top = document.body.scrollTop + document.body.offsetHeight - getDivHeight() - 10; daIFrameStyleObj.height = getDivHeight(); daIFrameStyleObj.width = document.getElementById("daDiv").offsetWidth; //Illogical and stupid hack to make IE not mess upp all <select>s on the page when scrolling. var selects = document.getElementsByTagName("select"); if(selects.length!=0) selects[0].style.fontFamily=selects[0].style.fontFamily; } </script> </head> <style> body {font-family:verdana;} .fixedbottom-iframe { display:block; position:absolute; left:15px; right:15px; /*filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);*/ z-index:0; } .fixedbottom-container { position:absolute; z-index:200; width:400px; left:15px; right:15px; border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; background-color:maroon; color:white; padding:10px; border:2px dashed black; } </style> <body> <iframe src="about:blank" class="fixedbottom-iframe" id="daIFrame"></iframe> <div id="daDiv" class="fixedbottom-container"> Some stuff here... Some stuff here... Some stuff here... Some stuff here... Some stuff here... </div> <form> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p> <p> <select> <option value="1">English</option> <option value="2">Swedish</option> </select> </p>

</form> </body> </html>

<select> behaving strangely

hwsoderlund

RonPK

hwsoderlund

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week