So, let it be known that I suck at making footers work properly. 
CSS:
Code:
/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img {
margin:0px;
padding:0px;
}
ul { list-style:none; }
img { border:0px; }
/* ============= */
html, body { height:100%; }
body { background:url(images/main_bg.gif) repeat-y center #101010; }
.container {
width:800px;
margin:0px auto -43px;
height:auto !important;
height:100%;
min-height:100%;
overflow:auto;
}
* html .container { overflow:visible; }
.banner {
background:url(images/banner.gif) no-repeat;
width:800px;
height:120px;
}
.footer {
background-color:#332921;
border-top:3px solid #101010;
width:800px;
height:40px;
text-align:center;
margin:auto auto;
color:#fff;
font-family:Arial;
font-size:10pt;
}
.navbar {
background:url(images/navbar.gif) repeat-x;
width:100%;
height:34px;
}
.navbar ul li { float:left;padding-top:2px; }
.navbar ul li a.home,
.navbar ul li a.forums,
.navbar ul li a.members {
background:url(images/nav_home.gif) no-repeat;
width:92px;
height:29px;
display:block;
}
.navbar ul li a.forums { background-image:url(images/nav_forums.gif); }
.navbar ul li a.members { background-image:url(images/nav_members.gif); }
.navbar ul li a.home:hover { background-image:url(images/nav_home_over.gif); }
.navbar ul li a.forums:hover { background-image:url(images/nav_forums_over.gif); }
.navbar ul li a.members:hover { background-image:url(images/nav_members_over.gif); }
.leftColumn {
width:185px;
margin:10px 0px 0px 5px;
float:left;
min-height:400px;
}
.blockHeader {
background:url(images/block_header.gif) no-repeat;
width:185px;
height:28px;
}
.blockHeaderText {
color:#fff;
font-family:"Lucida Sans", Arial;
letter-spacing:2px;
font-size:9pt;
padding:3px 0px 0px 10px;
}
.blockFooter {
background:url(images/block_footer.gif) no-repeat;
width:185px;
height:11px;
}
.blockBg {
background:url(images/block_bg.gif) repeat-y;
width:185px;
min-height:150px;
}
.blockText { padding:2px 15px 8px 15px; }
.blockText, .blockText a {
color:#fff;
font-family:Arial;
font-size:8pt;
text-decoration:none;
}
.blockText a:hover { text-decoration:underline; }
.middleColumn {
width:594px;
margin:10px 0px 0px 4px;
float:left;
min-height:400px;
}
.contentHeader {
background:url(images/content_header.gif) no-repeat;
width:600px;
height:28px;
}
.contentHeaderText {
color:#fff;
font-family:"Lucida Sans", Arial;
letter-spacing:2px;
font-size:9pt;
padding:3px 0px 0px 10px;
}
.contentFooter {
background:url(images/content_footer.gif) no-repeat;
width:600px;
height:11px;
}
.contentFooter2 {
background-color:#594632;
border:1px solid #3a2d20;
height:23px;
width:598px;
}
.contentSpacer { height:10px; }
.contentBg {
background:url(images/content_bg.gif) repeat-y;
width:600px;
min-height:150px;
}
.contentText {
color:#fff;
font-family:Arial;
font-size:8pt;
padding:2px 15px 8px 15px;
}
.contentBg label {
width:150px;
float:left;
font-family:Sans-Serif;
font-size:7pt;
}
.contentBg .spacer { margin-bottom:8px; }
.contentBg .submitSpacer { margin-left:150px; }
.contentBg .spacer input,
.contentBg .spacer textarea { width:450px; }
.contentBg .spacer textarea { height:140px; }
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo $path['root']; ?>style.css" />
</head>
<body>
<div class="container">
<div class="banner"></div>
<div class="navbar">
<ul>
<li style="padding-left:22px;"><a href="#" class="home"></a></li>
<li><a href="#" class="forums"></a></li>
<li><a href="#" class="members"></a></li>
</ul>
</div>
<div class="leftColumn">
<div class="blockHeader">
<div class="blockHeaderText">Navigation</div>
</div>
<div class="blockBg">
<div class="blockText">
<a href="<?php echo $path['index']; ?>">Home</a><br />
<a href="<?php echo $path['index']; ?>forums">Forums</a>
<div style="height:1000px;"></div>
</div>
</div>
<div class="blockFooter"></div>
</div>
<div class="middleColumn">
<?php include ($page.'.php'); ?>
</div>
</div>
<div class="footer"></div>
</body>
</html>
The problem:
On IE, it does the same thing except the footer is infront and the content goes behind it. In either case, that shouldn't be happening...why isn't the container pushing the footer down? Why is the content overlapping? |
