Resolved Footer isn't staying at bottom on IE [Archive]

...

View Full Version : Resolved Footer isn't staying at bottom on IE

Flames

06-10-2012, 08:24 PM

I was following this tutorial here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

My CSS:
html, body {
height: 100%;
margin: 0;
}

#header {
width: 556px;
height: 50px;
background-image: url(logonog.png);
margin: 0 auto;
}
#wrapper {
width: 100%;
text-align: center;
min-height: 100%;
margin: 0 auto -4em;
}

#footer {
height: 4em;
background-color: #009933;
}
#push {
height: 4em;
background-color: #000099;
}

#body {
width: 556px;
background-repeat: no-repeat;
background-position: center center;
margin: auto;

}

My page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<body>

</div>
<div id="wrapper">
<div id="leftwand"></div>
<div id="wandright"></div>
<div id="rightwand"></div>
<div id="header"></div>
<div id="body">
<p align="center"> </p>
<p align="center"><img src="intro.png" width="470" height="82" /></p>
<form method="post" action="" name="form1" id="form1">
<div align="center">
<p>
<input type="submit" value='' class="button" onMouseOver="this.style.cursor='pointer';" onClick="this.form.target='_blank'" name="getSite"/>
</p>
</div>
</form>
</div>
<div id="push"></div>
</div>
<div id="footer">footer goes here</div>
</body>
</html>

Before the code shown above I have some PHP and before the PHP I have this:
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

I know IE is very picky so I'm guessing it's something in my page code.

Thanks in advance!

Candygirl

06-10-2012, 09:25 PM

Hello

#wrapper {
margin: 0 auto -142px;
}

#footer {
height: 4em;
}

#push {
height: 4em;
}

I think the negative margin should be the same as your footer's height: -4em.

Flames

06-10-2012, 09:44 PM

Still doesn't work :(

Richter

06-10-2012, 09:48 PM

Don't be crazy, you just follow a bad tutorial, try my style.

Css
html, body { height:100%; overflow:auto; margin:0;}
header {background-color:#f00; min-height:10%; }
#Main {background-color:#0f0; min-height:80%; }
footer {background-color:#00f; min-height:10%; }

Html
<header>Head</header>
<div id="Main">Body</div>
<footer>Foot</footer>

If it isn't header or footer, add them into main div and try not to name your element's id like "body", "head" or "html" :)

Candygirl

06-10-2012, 10:04 PM

Still doesn't work :(
Here, now the footer does stays at the bottom with your code...
What browser are you testing with? Do you have a doctype on the top of your document ?

Excavator

06-10-2012, 10:18 PM

Hello Flames,
There is nothing wrong with the tutorial you followed to build this page... you've just made a few mistakes.

Why would you put a height: 300px on #body? Remove that and see what happens.

html, body {
height: 100%;
margin: 0;
background: #fc6;
}
#body {
width: 556px;
background-repeat: no-repeat;
background-position: center center;
margin: auto;
z-index: 1; /*this isn't doing anything*/
}
#wrapper {
width: 100%;
text-align: center;
min-height: 100%;
height: auto;!important; /*a default setting made important? Really?*/
margin: 0 auto -4em; /*a good suggestion from candygirl*/
}
#header {
height: 50px;
width: 556px;
margin: 0 auto;
background: #00f url(logonog.png); /*added a color since I don't have your images*/
}
#footer {
height: 4em;
background-color: #666666;
}
#push { height: 4em; }

Instead of the push method, I prefer this full height layout (http://nopeople.com/CSS%20tips/full-height-layout/index.html).

Flames

06-11-2012, 01:30 AM

Ok, now the footer is working but not on IE.

My CSS:
html, body {
height: 100%;
margin: 0;
}

#header {
width: 556px;
height: 50px;
background-image: url(logonog.png);
margin: 0 auto;
}
#wrapper {
width: 100%;
text-align: center;
min-height: 100%;
margin: 0 auto -4em;
}

#footer {
height: 4em;
background-color: #009933;
}
#push {
height: 4em;
background-color: #000099;
}

#body {
width: 556px;
background-repeat: no-repeat;
background-position: center center;
margin: auto;

}

My page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<body>

</div>
<div id="wrapper">
<div id="leftwand"></div>
<div id="wandright"></div>
<div id="rightwand"></div>
<div id="header"></div>
<div id="body">
<p align="center"> </p>
<p align="center"><img src="intro.png" width="470" height="82" /></p>
<form method="post" action="" name="form1" id="form1">
<div align="center">
<p>
<input type="submit" value='' class="button" onMouseOver="this.style.cursor='pointer';" onClick="this.form.target='_blank'" name="getSite"/>
</p>
</div>
</form>
</div>
<div id="push"></div>
</div>
<div id="footer">footer goes here</div>
</body>
</html>

Before the code shown above I have some PHP and before the PHP I have this:
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

I know IE is very picky so I'm guessing it's something in my page code.

Thanks in advance!

Flames

06-11-2012, 02:46 AM

For some reason I didn't set my wrapper height to 100%. Thank anyway guys! I'm so damn happy now that I got it.

Candygirl

06-11-2012, 07:49 AM

#wrapper {
height: auto !important; /*a default setting made important? Really?*/
}
I guess this was to use the height 100% trick for IE6...
Good point for the height 300px ;) (I didn't test with any content and didn't watch the entire code :x)

@Flames

Setting the Wrapper height to 100% should be usefull only for IE6 and under (as it does not support the min-height property). In all newer IE the height 100% is not usefull.

As I've allready mentioned it in your other post (http://www.codingforums.com/showpost.php?p=1238561&postcount=6), you might have some rendering engine problem, if IE7 and over need the 100% height.