Welcome to the MacNN Forums.

MrsLarry · Apr 16, 2008, 02:23 PM

I'm doing this page now, I've got my handy CSS for dummies book next to me, but for the life of me i can't get a footer to display correctly in IE.

here's the css:
#footer {
background-color:#990000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 150px;
z-index: 20;
}

here's the html:
<div id="footer">
content
</div>

In Safari, it looks perfect, but in Firefox and IE the red bar is showing up across the center of the page. HELP?!

mdc · Apr 16, 2008, 02:39 PM

Could you link us to a page with all of your html and css since your footer css and html should work fine. I think maybe some other html/css might be getting in the way.

MrsLarry · Apr 16, 2008, 02:45 PM

here's the site i'm working on, i changed it to a solid red bar for troubleshooting purposes, but in the end i want the image.

http://mrslarry.cousinlarry.com/SJMRemodeling/

design219 · Apr 16, 2008, 02:46 PM

Are you talking about Explore 6? Explorer 6 doesn't recognize "bottom" for position. I'm not sure what's up with Firefox. I made a test page with your code and it works fine for me (at lease Firefox on Mac).

There is an IE only property called "layout" that might be the solution. I'll take a look and see.

design219 · Apr 16, 2008, 02:48 PM

By the way, you should get the book "CSS, the missing manual". It is wonderful.

MrsLarry · Apr 16, 2008, 02:53 PM

Originally Posted by design219

Are you talking about Explore 6? Explorer 6 doesn't recognize "bottom" for position. I'm not sure what's up with Firefox. I made a test page with your code and it works fine for me (at lease Firefox on Mac).

Yeah, my mac firefox and safari worked fine, but on 2 PCs on IE and firefox, no dice. i am stumped.

Originally Posted by design219

By the way, you should get the book "CSS, the missing manual". It is wonderful.

I'll check into that, thanks.

design219 · Apr 16, 2008, 03:22 PM

Make a Footer Stick to the Bottom of the Page

This looks like it might be a good solution for all browsers.

besson3c · Apr 17, 2008, 10:27 AM

Sometimes CSS gets a little sketchy for doing somewhat advanced stuff like this, or at least making it cross browser.

Another thing you could do is setup this block to be a simple widget that is rendered across the very top of your page, and add an onload Javascript event handler to your body tag to adjust this div block to move it to the bottom of the page based on the browser height. I believe there is a CSS attribute to get the element to not scroll with the rest of the page, but I'm having a hard time remembering this right now.

At any rate, you might find that a CSS/Javascript hybrid might create a little more browser consistency here, if this is an issue.

besson3c · Apr 17, 2008, 10:32 AM

Let me know if you want the cross browser compatible JS code I use for determining browser height...

mdc · Apr 18, 2008, 07:33 PM

besson3c, you mean position: fixed?
If I remember correctly, it's not supported in IE >7

besson3c · Apr 18, 2008, 07:35 PM

mdc: yes. I never use that attribute, which is why it escaped my memory

Chuckit · Apr 18, 2008, 09:07 PM

Originally Posted by mdc

besson3c, you mean position: fixed?
If I remember correctly, it's not supported in IE >7

I think you mean IE<=5.

design219 · Apr 18, 2008, 10:30 PM

Fixed position is not supported in IE6 either.

MrsLarry · Apr 18, 2008, 11:47 PM

thanks for all the advice guys and girls... i gave up and made a table. gross. i know. but it managed to do the trick.

Chuckit · Apr 19, 2008, 02:42 AM

Originally Posted by design219

Fixed position is not supported in IE6 either.

Oh yeah, you're right. I was just pretty sure it's supported in IE 8.