PDA

View Full Version : postion:fixed Solution Needed For IE6


EcoSee
02-14-2008, 02:07 AM
Hey all. I have been working on this for quite some time and cannot find a solution. I now have a template that can center an image vertically as well as horizontally. They said it couldn't be done! Ha.

But, I have one last problem. The Footer! I have set my footer using CSS like this:

#footer {
position:fixed;
bottom : 0;
height: 20px;
width:100%;
}

No problem. This works for 78% of internet users. Than there is the 22% still using Microsucks IE6. It can't see position:fixed. So a work around is needed. Like this one!

<style type="text/css">

@media screen {

* html div#footer {
position:absolute;
}

}
</style>

This solves the problem for IE6 and the media screen tells all other browsers to ignore the new CSS. Now I have the footer positioned at the bottom using position:absolute

New problem. I think it is called a "footer drop" but I am not sure that this is the correct term. If an image is larger than the browser window, when you scroll down the footer is simply dropped off where it was and does not stay at the bottom of the browser. Now it is laying across the image. Its okay if you simply make the browser larger... but that may not be an option with a tall image.


So... how does one keep the footer at the bottom of the page in IE6 without hacking the code to hell. I do believe that there is a way to get the screen to resample or something like that???

Thanks Eveyone

EcoSee
02-14-2008, 02:36 AM
Answering my own question!

There might be an easier way... but I found a working solution! This creates a style in the html file that can only be seen by IE6 of the remaining 99.9% of browsers being used today. I hope someone else finds this helpful. See the IE6 fixed footer solution below:


<style type="text/css">

@media screen {
* html div#footer {
position:absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}

}

</style>

This means that I will be releasing a new template soon for beta testing that can center our photoblogs vertically and horizontally. After seeing my site on a 24 inch iMac I decided that this was a MUST have template!