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?
