IE6 iframe anchor links moves iframe up

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.

ansaurus

tags:

views:

answers:

IE6 iframe anchor links moves iframe up

related questions