I am having trouble getting this sticky footer to work:
My results are here:
http://pi33rietlu.thelostmenu.com/
The troube is that the border shadow should extend to the very bottom behind the footer. The background image for the main content area will not extend to the bottom either.
Thanks
The border shadow must go on the div that has the min-height:100% set on it which is your #main_bg div. You have it on the .container div instead.
However that may not work with your image design, but any image you want to extend down to the footer must go on the min-height:100% div.
You really don’t need all those inner containers with the IE5 box model hacks. It is just going to cause problems for you with this layout and IE5 is dead browser. It is not worth the trouble it is going to cause you.
I had to clean out some of the box model hacks to get it to work but I did not clean them all up.
Run this as test.html in your root folder and it should get you close to what you are after.
<!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" lang="en">
<head>
<title>Applying CSS Mini-site</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css" media="screen, projection">
@import "css/basic.css";
</style>
<style type="text/css">
/* ---------- self-clearing floats ----------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* CSS rule for IE6 */
* html .clearfix {
height: 1%;
}
/* CSS rule for IE7 */
*:first-child+html .clearfix {
min-height: 1px;
}
/* Default Styles */
a { color: #ffc50c; text-decoration: none; }
a:hover { cursor: pointer; text-decoration: underline; }
a img { border: 0; }
.fl { float: left; display: inline; }
.fr { float: right; display:inline; }
.ac { text-align: center; }
.ar { text-align: right; }
.al { text-align: left; }
.cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; }
.hidden { display: none; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
/* ---------------- layout ----------------- */
body
{
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:url(images_new/tile_bg.png) repeat;
}
#top /*main*/
{
position:absolute;
left:0;
width:100%;
height:178px;
position:absolute;
background:url(images_new/bg.png) repeat-x;
padding-bottom:0;
}
#header
{
background:url(images_new/header_bg.jpg) no-repeat;
height:168px;
margin-left:50px;
}
#logo
{
background:url(images_new/logo.png) no-repeat;
margin-left:0;
height:70px;
width:406px;
float:left;
display:inline;
position:relative;
top:10px;
left:0;
}
#logo h1
{
text-indent:-9999px;
}
#sidebar
{
float:right;
display:inline;
margin-top:20px;
margin-right:50px;
width:300px;
}
#content
{
float:left;
display:inline;
margin-top:20px;
margin-left:70px;
width:460px;
padding:0 0 93px 0;
}
#content h1
{
font-family:arial. sans-serif;
font-size:2em;
color:#4BAEDC;
}
#footer
{
width:900px;
margin:auto;
margin-top:-93px;
background:url(images_new/footer_bg.png) bottom center no-repeat;
clear:both;
position:relative;
}
#footer .container
{
background:url(images_new/footer_bg.png) bottom center no-repeat;
height:93px;
p/adding-bottom:0;
p/adding-top:0;
b/order-top:0 solid #000;
m/argin-left:50px;
}
#footer .container p
{
text-align:center;
margin:0;
}
/* --------------- sticky footer --------------- */
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
background:url(images_new/content_bg.png) repeat-y;
width:900px;
margin:0 auto;
min-height:100%;
/*margin-top:-93px;/*footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
position:relative;
}
#header {
b/ackground:red;
/*border-top:93px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
b/ackground:red;
w/idth:760px;
m/argin:auto;
height:93px;/* must match negative margin of #outer */
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1,h2,p{padding:0 10px;}
/* ----------------------- main navigation ------------------ */
#menubar
{
height:36px;
float:left;
display:inline;
margin-top:62px;
margin-left:0;
width:800px;
position:relative;
z-index:5;
}
#menu
{
border-top:0 solid #8088C6;
border-bottom:0 solid #8088C6;
text-align:left;
list-style:none;
margin:0 auto;
padding:0;
}
#menu li
{
background:url(images_new/sep.png) top left no-repeat;
height:36px;
line-height:36px;
display:inline-block;
margin:0 -2px;
}
#menu li.home
{
background-image:none;
}
#menu li a
{
display:inline-block;
font-size:1.1em;
text-decoration:none;
color:#fff;
outline:none;
font-family:arial,sans-serif;
text-transform:uppercase;
padding:0 0 0 57px;
}
#menu li a:hover
{
text-decoration:underline;
}
#menu li a b
{
float:left;
display:block;
font-weight:400;
padding:0 20px 0 0;
}
#menu li a:hover b
{
color:#fff;
}
* html #menu li,*+html #menu li
{
display:inline;
}
</style>
<!-- sticky footer -->
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->
</head>
<body>
<div id="top"></div>
<div id="outer">
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="menubar">
<ul id="menu">
<li class="home"><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>About</b></a></li>
<li><a href="#"><b>Laminate</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>
</div>
</div><!-- /header-->
<div id="content">
<h1>Welcome to our website</h1>
<p>This is
WordPress. Lorem ipsum</p>
</div><!-- /content-->
<div class="cl">
</div>
</div><!--/outer-->
<div id="footer">
<div class="container">
<p>© 2010 Company - All Rights Reserved</p>
</div><!-- /container-->
</div><!-- /footer-->
</body>
</html>
Thank you very much.
I had hoped the shadow could be placed in an internal div but I suppose that is impossible. I forgot that anything outside the vertically uniform pattern has to be absolutely positioned.
Good work Ray.
I had hoped the shadow could be placed in an internal div
There is only ever one element that can stretch to the bottom (apart from the body) and is explained in the article you linked to. Everthing must be accomplished on that element unfortunately.
In CSS you can’t have multiple nested elements all stretching to the bottom because it doesn’t work that way.
As Ray mentioned your box model hacks are wrong and unnecessary anyway these days.
In fact they could lead to problems as you have the backslash before the lettters a-f which means that they will be treated as hex instead. The backslash hack is only used before letters later in the alphabet (e.g. he\ight:100px).
It seems you have used a forward slash anyway so remove them all.
m/argin:auto;
Looks good