...

View Full Version : IE6 CSS Footer problem



djublonskopf
01-05-2007, 11:15 PM
I have a small problem that only seems to occur in IE6.

At the bottom of this website's pages (see this page (http://www.cepnet.com/services/partners/profile.cfm) as an example, which uses this CSS file (http://www.cepnet.com/files/css/cep2.css)) there is an absolutely-positioned footer which in theory hugs the bottom of the viewport or the document, whichever is lower.

This works fine unless you're using IE6 and the height of the document changes after the HTML has finished loading (say, if I use Javascript to make a normally hidden DIV visible). If this happens, the bottom of the page "kicks out from under the footer", so to speak, and the footer stays put while the page gets longer, which occasionally causes the footer to obscure necessary information, or even the submit button.





+---------------+ +---------------+
| | | |
| | | |
| Normal Page | | Same Page |
| w/ Footer | | w/ Normally |
| | | Hidden DIV |
| | | Now Visible |
| | | |
| | | (Content is |
+---------------+ +---------------+
| Footer | | Footer |
+---------------+ +---------------+
| by unmoving |
| footer... |
| |
+---------------+




(Click "4" or "5" on the example page to see this happen. It won't work if your viewport is tall enough to accomodate the whole page, though, so you might need to try shrinking your browser window.)

I know I can just wrap the form in a containing <div> with enough height to accomodate any potential height changes, but there are other pages on the site that are harder to predict. Is there any way to get Internet Explorer 6 to move a bottom-positioned <div> on the fly?

dyzzy
01-18-2007, 07:47 PM
Bump for I need an answer for this problem too.

Arbitrator
01-19-2007, 10:56 AM
there is an absolutely-positioned footer which in theory hugs the bottom of the viewport or the document, whichever is lower.That’s not what absolute positioning does by itself. Normally, absolutely positioned content is positioned relative to the initial viewport. Then if you scroll the page, the footer will remain in the same spot as in that diagram in your post. In order for the footer to work as requested, relatively absolute positioning is required:

CSS:

html, body {
height: 100%;
}
div#container {
position: relative;
min-height: 100%;
padding-bottom: 1.2em;
}
* html div#container { /* IE6 star‐HTML exploit */
height: 100%;
}
div#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.2em;
}

HTML:


<html>

<body>
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>

dyzzy
01-19-2007, 03:05 PM
Thanks for the reply, but that solution didn't work for me.

What did work for me, though, was making IE load a separate CSS sheet with the following:


#footer
{
top: expression((document.body.offsetHeight - 60) + "px");
}

(60 is the height of my footer)

Arbitrator
01-21-2007, 12:15 PM
What did work for me, though, was making IE load a separate CSS sheet with the following:


#footer
{
top: expression((document.body.offsetHeight - 60) + "px");
}

(60 is the height of my footer)I’d use real CSS if possible. Microsoft’s CSS expressions use JavaScript, so I assume that they wouldn’t work for users with JavaScript disabled.

MrMyles
01-27-2007, 02:12 AM
I have the same issue as the original poster.
I needed a specific footer at the bottom of every page that needs to be at the bottom of the screen or the document, whichever is lower.

Reading the advice here, I got that, now I have a new issue.
My content needs to be centered on the page within an 800px table.

However, if I position it to the bottom absolutely, I also need to set absolute left or right position, which does not work for me.

Is there anyway to position my footer absolutely on the bottom while relatively centered on the page?

Here is the site where I am trying to do it:
http://www.echosales.ca

Check the various pages to see the various different results I am getting.

Thanks in advance to any that can help.

Arbitrator
01-27-2007, 02:41 AM
However, if I position it to the bottom absolutely, I also need to set absolute left or right position, which does not work for me.

Is there anyway to position my footer absolutely on the bottom while relatively centered on the page?Put the footer inside a div element. Give that element a width of 100% and absolutely position it zero from the left and bottom. Then, center the normally positioned footer inside of that.

MrMyles
01-27-2007, 02:59 AM
Thanks for the help, much appreciated.

It works perfect for Opera and FF, but IE6 still sticks it on the left.

Arbitrator
01-27-2007, 03:23 AM
I believe that you need to use text-align: center to center it in Internet Explorer 6’s quirks mode. You’re using the invalid align: center.

MrMyles
01-27-2007, 03:31 AM
Tried that too, IE just refuses to play nice.
Thanks for the help.

MrMyles
01-27-2007, 06:36 PM
I see now.
My problem rested with using tables.
Soon as I removed the footer from it's prison cell, it worked perfectly.

Thanks for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum