Sticky footer working in Safari..but not Firefox

HTML & CSS
1

Hi everyone!

I’m trying to get a “sticky” footer (like this) going for this Wordpress-powered site:

http://microprobe.zacharyross.net/

The html is like so:


<div id="wrapper">

        <div id="stickit">
            (all the site content)
        </div>

</div>

<div id="foot">

</div>

And here’s the CSS:


html, body {height: 100%;}

#wrapper {
	min-height: 100%;
}

#stickit {
	overflow: auto;
	padding-bottom: 100px;
}

#foot {
	width: 100%;
	height: 100px;
	position: relative;
	margin-top: -100px;
	clear: both;
}

It works great in Safari but not at all in Firefox. What gives?

2

You rule! I would of NEVER found that. I’m using someone else’s template as a starter…maybe for the last time. So many CSS files!

3

Duh. If I missed the blue link in your post, it’s going to be something obvious in your code lawlz. I don’t even have the excuse of no coffee today.

Looking at it now on someone else’s machine with FF and I can’t see anything wrong, so I’ll look at it at work tomorrow with all my browsers and my tools.

You looked at Safari and Firefox… anyone else? Are you on a Mac? I’m going to check Opera and IE.

4

Hi,
I had to strip all some of the inner elements out of the page to get it where the sticky footer could even begin to work without expanding.

After doing that with firebug it looks like the cause of the problem was the display:table that was set on the html in your reset.css

html { [COLOR=Red]display: table;[/COLOR] width: 100&#37;; height: 100%; overflow-x: hidden !iefix; }
5

A could page specifically to look at would be one like this: http://microprobe.zacharyross.net/articles/

At least on my machine the footer is floating up about 1/2 way up the page. I am on a Mac and at this point I’d definitely not look at it in IE or Opera as both require a little extra line or two of CSS which I was going to wait about until after I have it working in the “reliable two” I’ll slap on some kludges. :shifty:

6

It’s that link at the top of the post:

http://microprobe.zacharyross.net/

Thanks for wanting to look at it! I was getting worried sticky footers are not a popular topic.

7

Unless I misread something, your code looks good. Sooo. Do you have a demo page you can post so we can see it ourselves?