...

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">&nbsp;</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">
<!--
body {
background-image: url(bg.jpg);
}
.style4 {font-family: "Book Antiqua"}
-->
</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">&nbsp;</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">
<!--
body {
background-image: url(bg.jpg);
}
.style4 {font-family: "Book Antiqua"}
-->
</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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum