Welcome to the MacNN Forums.

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?!

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.

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/

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.

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

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

I'll check into that, thanks.

Make a Footer Stick to the Bottom of the Page

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

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.

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

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

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

I think you mean IE<=5.

Fixed position is not supported in IE6 either.

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.

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