Help with doctype issues
Posted
by
James
on Stack Overflow
See other posts from Stack Overflow
or by James
Published on 2011-01-12T12:59:20Z
Indexed on
2011/01/12
13:53 UTC
Read the original article
Hit count: 180
Hi
I am having issues making my footer stick to the bottom of the page in all browsers.
I have the following document structure:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
</ul>
</div>
<div class="expander"></div>
</div>
<div id="footer" class="expander">
</div>
</body>
</html>
Relevant CSS is:
body
{
margin: 0;
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -116px;
}
.expander
{
height: 116px;
}
#footer
{
width: 100%;
}
#header ul
{
list-style: none outside none;
clear: both;
margin: 0;
}
#header li
{
margin: 0;
margin-right: 20px;
padding: 0;
display: inline-block;
height: 85px;
padding-top: 20px;
margin-bottom: -20px;
}
When used without any doc type, the page renders as I intend it to in Chrome and Firefox. In IE8, however, the list item tabs are on separate lines
When I add an XHTML doctype, the page renders correctly in IE8 except the footer is not drawn at the bottom of the page in IE8, Chrome or Firefox, i.e. the footer sits directly below the menu bar.
Example doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
What am I doing wrong?
© Stack Overflow or respective owner
