IE6 iframe anchor links moves iframe up
- by WastedSpace
Hi,
Having a real head scratching moment... I have a site where there is a footer div that always sits at the bottom of the screen (26px high), and above that I have an iFrame which sizes to 100% of the remaining height. This works well. Even clicking on anchor links inside the iframe works as it should in all browsers (apart from IE6). Unfortunately I still have to support IE6.
What is happening in IE6 is that the footer jumps up the page with the iframe still above it when I click on an anchor link. The top part of the iframe is cut off. Even the iframe's scroll bars disappear under the top of the browser.
I have created some screen shots to show you what I mean. I have blurred out the actual data for now.
How it should look (and does look) in other browsers:
http://img100.imageshack.us/i/screen1om.jpg/
How it looks in IE6 before clicking on an anchor link:
http://img532.imageshack.us/i/screen2e.jpg/
(I had to make the iframe's height 95%, because if I set it to 100% height weirdly it wouldn't show anything...)
How it looks in IE6 after clicking on an anchor link:
http://img214.imageshack.us/i/screen3g.jpg/
It's hard for me to show the fool code I am using, as there are lots of other things going on (of which I'm confident doesn't affect the layout), so will try to summarise:
The html code (simplified):
<div id="ifra"><iframe src="home.php" frameborder="0" name="content_pane" id="content_pane" marginheight="10" marginwidth="10"></iframe></div>
<h1 class="toolbar"><a id="footerlink">Site Name</a></h1>
The CSS (simplified):
html, body {
overflow: hidden;
}
html, body, iframe {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
#ifra, iframe {
position: absolute;
width: 100%;
left: 0;
}
#ifra {
top: 0px;
bottom: 26px;
}
iframe {
border: 0 none;
}
.toolbar {
height: 26px;
background-color: #C2C7C9;
position: fixed;
bottom: 0;
width: 100%;
background-image: url(bg.png);
background-repeat: repeat-x;
background-position: left top;
}
IE8 specific CSS:
#ifra, .toolbar {
position: fixed;
}
IE7 specific CSS:
html {
padding: 0px;
}
#ifra, iframe {
position: absolute;
}
#ifra {
top: 0px;
bottom: 26px;
}
* html body {
padding /**/: 100px 0 50px 0;
overflow-y /**/: hidden;
}
IE6 specific CSS:
.toolbar {
position: fixed;
}
* html {
overflow-y: hidden;
}
* html body {
overflow-y: auto;
height: 100%;
}
* html .toolbar {
position: absolute;
}
iframe {
height: 95%;
}
#ifra {
height: 100%;
}
I know it's not ideal not seeing the full code, but just wondering if there is anything jumping out at anyone from these lines of code? By the way I did consider dropping the div surrounding the iframe, but for some reason the scroll bars would disappear under the footer in all browsers...
Thanks for looking!
Ali.
