In my Googling, I found a lovely cross-browser solution for fixed-position divs on this page, via the V7 Network's Web Development Community:
http://dev.jdenny.co.uk/css/ie_fixed.html
It mostly works, but I need the div to be 100% width, and the div covers the browser's scrollbar in both Firefox and Safari. The problem does not happen in IE or Opera. (I've tried all four browsers on my PC, as well as Safari on a Mac.)
Here's the test page (ignore the other malfunctioning or half-assed stuff; I'll be fixing all that in due time):
http://www.sacredfools.org/upcoming-test.htm
I've seen it suggested elsewhere on this forum that to solve this problem, you need to use conditional comments, but so far as I can tell, the conditional comments only apply to IE, and I can't figure out how to amend the code to apply them anyway. (The thread I found here was from 2003, and the explanatory links no longer worked.)
The specific code in question from the page is below; this is going to be used as a Server-Side Include in order to put the site's menu on the top of every page so that I can move away from using frames:
Code: Select all
<script>
function calculateBgX(oElement) {
return document.body.scrollLeft - getOffsetLeft(oElement);
}
function calculateBgY(oElement) {
return document.body.scrollTop - getOffsetTop(oElement);
}
function getOffsetTop(oElement) {
var iResult= oElement.offsetTop;
while (oElement.offsetParent) {
oElement = oElement.offsetParent;
iResult += oElement.offsetTop;
}
return iResult;
}
function getOffsetLeft(oElement) {
var iResult= oElement.offsetLeft;
while (oElement.offsetParent) {
oElement = oElement.offsetParent;
iResult += oElement.offsetLeft;
}
return iResult;
}
</script>
<style>
#fixed {
position: fixed;
position: expression("absolute");
left: 0px;
padding: 0px;
width: 100%;
top: 0px;
height: 89px;
top: expression(eval(document.body.scrollTop));
}
body {
background: url('x.gif');
background-attachment: fixed;
margin:0;
}
html {height:100%}
</style>
<div id="fixed">
<iframe src="http://www.sacredfools.org/top-test.htm" frameborder=0 marginheight=0
marginwidth=0 width=100% height=89px scrolling=no"></iframe>
</div>
<div style="height:89px"></div>
X.gif is simply a transparent pixel. The code, for whatever reason, seems to need some graphic there; without it, the div flickers as you scroll. The extra div below is simply to keep the top of the content of each page from getting lost under the fixed-position menu!
(I'm putting the actual menu page in an iframe within the div so that its stylesheet doesn't conflict with the stylesheets of other pages on the site, some of which are styled differently - the site is very large, with 12 years of history, so I'm just trying to keep things simple. Maybe I'll iron that out better in the future, but for now, I don't think it's part of the problem; the div is covering the scrollbar in Firefox and Safari whether it's got an iframe in it or not... and if I apply the id="fixed" directly to the iframe rather than wrapping it in a div, I still get exactly the same result.)
Any help would be much appreciated. Thanks!