Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi all,
I am a noobie with CSS layout, and I need some help with footers. So far I have been able to get them working in standards compliant browsers but not in IE. I've tried to simplify my code for you. Any help is greatly appriciated.
-Edit
So the footer work for modern browsers, with long content and without, but not in IE. It doesn't even stay centered. Whats going on?
Also how do I make a code block?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document Title</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
font-family: sans-serif;
text-decoration: none;
}
html, body { height: 100%; }
body { text-align: center; }
#header { height: 200px; background-color: #6A6491; }
#navigation ul { list-style-type: none; background-color: #44405B; text-align: center; }
#navigation li { display: inline; }
#thisissue { background-color: #CF6B30; height: 150px; padding: 20px; }
#thisissue h2 { color: #fff; text-align: left; }
#thisissue p { text-align: left; color: #fff; }
#content { text-align: left; padding: 30px; }
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
margin: 0 auto;
width: 760px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #44405B;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="container">
<h1 id="header">Website Header</h1>
<div id="navigation">
<ul id="navlist">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="thisissue">
<h2>Proin elementum tortor dictum!</h2>
<p>Curabitur pellentesque. Pellentesque volutpat. Vestibulum vel tortor ac nulla faucibus blandit. Morbi vitae sapien vitae arcu lacinia pretium. Proin elementum tortor dictum nisl. Aenean elementum venenatis risus. Ut <a href="#">fermentum</a> urna vel nulla. Fusce ut ante vitae urna feugiat malesuada. Duis ullamcorper scelerisque est.</p>
</div>
<div id="content">
<h2> Vivamus pharetra orci euismod enim!</h2>
<p>Donec faucibus, dolor suscipit tempor laoreet, orci odio sagittis diam, ut egestas felis sapien nec mi. Cras sit amet sapien. Duis in mauris. Duis in est. Suspendisse porttitor. Integer viverra accumsan neque. Vestibulum sollicitudin dictum sapien. Etiam ullamcorper cursus dolor. Integer tristique, eros vel sollicitudin semper, nisi <a href="#">mauris</a> eleifend arcu, vel fermentum odio felis nonummy sapien. Pellentesque sed sem sed odio sagittis semper. Morbi rhoncus nisl sit amet lacus. Vivamus consectetuer nulla vel mi. Nunc porta euismod dolor. Mauris at dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In quam. Vivamus pharetra orci euismod enim. Aliquam erat volutpat. Aenean sit amet ante.</p>
</div>
<div id="footer">
<p>Copyright © 2006 Company Inc.</p>
</div>
</div>
</body>
</html> -
Best all around footer hacks i've seen are here:
http://www.themaninblue.com/writing/perspective/2005/08/29/
you can fix the IE footer going off to the right by doing this
#footer {
position: absolute !important;
position/**/: relative;
bottom: 0;
width: 100%;
background-color: #44405B;
color: #FFFFFF;
} -
- CommentAuthorNick Presta
- CommentTimeFeb 3rd 2006
FSA is the best method I have seen. -
-
CommentAuthorbenjitastic
- CommentTimeFeb 5th 2006
First, you can prevent the footer from sliding off to the right in IE by changing #footer to:
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #44405B;
color: #FFFFFF;
}
and then to fix it to the bottom of the page regardless of content, change #containter to:
#container {
position: relative;
height: auto !important; /* For newish browsers */
height: 100%; /* This is for crappy IE*/
min-height: 100%; /* For newish browsers*/
margin: 0 auto;
width: 760px;
} -
-
This seems to work for me.. http://www.alistapart.com/articles/footers/
-
Thanks everyone!
That works beautifuly benjitastic.
1 to 6 of 6