I know it works...but why? (Sticky Footer CSS modification)

HTML & CSS
1

Here’s the basic HTML structure:

<html>
<head><style>
<!--[if !IE 7]>
#page {display:table;height:100%;}
<![endif]-->
</style></head>
<body>
[INDENT]<div id="page">[/INDENT]
[INDENT][INDENT]<div id="main>[/INDENT][/INDENT]
[INDENT][INDENT]</div> <!--END OF MAIN-->[/INDENT][/INDENT]
[INDENT]</div> <!--END OF PAGE-->[/INDENT]
[INDENT]<div id="footer">[/INDENT]
[INDENT]</div><!--END OF FOOTER-->[/INDENT]
</body>
</html>

Here’s the relevant CSS:

html {height:100%;}

body {height:100%;}

#page {min-height:100%;}

#main {
overflow:auto;
padding-bottom:150px;
}

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

This works to keep a 150px high footer stickied to the bottom, except it doesn’t work in IE 7. However, if I add “padding-bottom:150px;” to the #page div CSS then it works…

…but why? I’m sure it’s elementary, but I’m not seeing it.

Any help would be appreciated :smiley:

2

Well, I’m hooped until he finalizes the content - I’ll just convert it to straight code afterward and see if it makes a difference.

Thanks again for all the insight! I look forward to rummaging through old threads on here :smiley:

3

As I’m writing this I’m wondering if the WYSIWYG visual editor within WP could be the culprit.
I suspect that is your problem. I have seen the WP editor inject <br> tags after images which caused problems when floating them. What would happen is everytime you would add whitespace in the editor it would put the <br> tag in there which you could not see unless you viewed the page source. That is just one example too, it does other strange things similar to that.
After all, it’s a WYSIWYG editor so it doesn’t surprise me.

I don’t do WP but if I remember correctly you can adjust the settings on it. You can find more info on that from someone who works with WP or at their own forum.

4

Here’s the URL to the web site (test server) I’m helping a friend with:

http://nupper.heliohost.org

They specifically wanted a WP CMS site so I took wp_edublog by Tracy Ridge and modified it to their specs: no sidebar, blog, or rss (header graphic is just temporary). You may notice the sidebar id div still in the code, but with no CSS - I don’t have enough experience to start removing WP PHP functions without fear of messing something up.

As I’m writing this I’m wondering if the WYSIWYG visual editor within WP could be the culprit. I had my friend fill in the content as they saw fit, but not in straight code. I feel I’m just grasping at straws, though.

Thanks again for your assistance!

5

Did everything you said, but the SOB wouldn’t display properly in Opera despite the fix included in the CSS.

…then I switched to STRICT from TRANSITIONAL and it worked perfectly.

I’ve tried Google-ling why STRICT solved the problem, but nothing really clear.

Any hints? :slight_smile:

6

Great! I’ll give it a try tonight. Many thanks! :slight_smile:

7

Hi beebs, Welcome to SitePoint :slight_smile:

It looks like the main problem you are having with IE7 (and all IE’s) is your doctype. The lack of a proper doctype will put all versions of IE in quirks mode.

We really don’t suggest using display:table; as an IE8 fix anymore. Opera also has a min-height;100% bug and they can both be fixed by using some pseudo :before and :after blocks. It is explained in the FAQ link below.

How do you put a sticky footer at the bottom of the window?

Here is an example using those pseudo block fixes, also note the doctype being used. Just view the page source for the details.

8

…then I switched to STRICT from TRANSITIONAL and it worked perfectly.

Hi,
Unless this is an old site that is actually in transition you should not be using a transitional doctype anyways.

For the sake of testing though I set up this bare bones example with a trans doctype. It uses the same method as I showed earlier and I don’t see any problems with it in Opera.

Any hints? :slight_smile:

We would need to see the code that you are working with to pinpoint the trans problem. I suspect there is something else causing problems there.