CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8
Water Cooler v2
Water Cooler v2

Reputation: 33850

Footer appears in the middle of the page in IE only

I use this style information to make my footer stick to the bottom of my web pages and it works super in FF, Chrome and Opera. Only in IE, the footer appears in the middle of the page instead of at the bottom.

body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }

#parent 
{
    min-height: 100%;
    position: relative;
}

#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }

#content { padding-bottom: 150px; position: relative; }

#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }

The HTML structure is as follows:

Update

I figured if I add a conditional this selector for IE, it works in both browsers. 

#parent { height: 100%; /* min-height: 100%; */ }

Now, would someone please tell me if it is legal to add a conditional CSS comment in a .css file that is included as an external in an HTML file? I guess not. How do I go about using this conditional comment without using an additional IE only CSS file?

Upvotes: 3

Views: 5454

Answers (2)

Tomas Danilevicius
Tomas Danilevicius

Reputation: 38

This should help:

html {
height: 100%;
}

Take a look in the source code and try it on any browser: Footer at the bottom of the page. It works on IE7, IE8 and IE9, only IE6 and under will not becouse of min-height property. I think putting correct DOCTYPE will fix your issue. Hope that helped.

Upvotes: 2

user794316
user794316

Reputation:

I had the same problem a few weeks back and a found a pretty good tutorial on this. Click here! The general idea behind this solution is to create a wrapper which soaks up most of the page, leaving only enough room for your footer to be positioned at the bottom of the page. This trick definitely works in IE.

Upvotes: 2

Related Questions