The footer seems to be at the bottom of the content in most browsers except for Firefox. I would prefer the footer to be always at the bottom of the content compared to bottom of screen.
What am I doing wrong ?
My sample page is at: css2g.webatu.com/test.shtml
Thanks for any help.
Try changing “height:100%” to “min-height:100%” on html,body.
No keep them at height and not min-height 
To do this, place the footer outside of the wrapper and since its’ height is 58px, just replace the values
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm
He used 40px as his value…soorry I’m not explaining correctly I seem t obe tongue tied lol.
Just look at the above link and replicate it
Thanks!
I am debating if I would like the footer at the bottom of the content (I think I do) because then I I am thinking I won’t have to change my layout so much. The way my current layout works/looks, I am not sure I can take the footer and the bottom border out of the wrapper and have it always at the bottom of the screen…
Here is my attempt so far at css2g.webatu.com/test2.shtml
The new page is trying to use the sticky method so it is always at the bottom of the screen. (I have to leave now… till Monday).
thanks all!
Hi, yes the sticky footer is working fine now on your current attempt (though some elements need better placement)
IE8/Opera need to be fixed (try vertically adjusting the size, it doesn’t update)
Here is the OPera CSS to fix it
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
And the IE8
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#wrapper {height:100%;display:table;}
</style>
<![endif]-->
I don’t think this method will work for me and allow me to use my 3 background images. I would like to keep those background images to keep my code to text ratio low. Please see: css2g.webatu.com/test3.shtml
I have a background image in the footer, and in the outer wrapper and in the bottom border (bdrb) which gives it a rounded shadow image.
Is there another way where the footer does not have to be outside of the wrapper? For my needs the footer can just be at the bottom of each page, it does not have to be at exact bottom of the screen.
thanks again!
did you find a solution to this? I need to show current document stats at the bottom of a dynamic page in opentext, and if the document is a few pages long but the last page is very short (only a few words/phrases) the “last” footer is not displayed and the user has to scroll down for it. silly…
Bored… just messing with it… I forget the thread - why the negative margin-top?
Scratch that - I found the thread. http://www.sitepoint.com/forums/showthread.php?p=4377680#post4377680
It’s the maximum margin allowed by Opera (only browser who needs to worry) and I believe the reason for it is because it’s trying cancel out the pseudo element’s whole effect on cleared elements by a very large negative top margin on it. The value up there is Operas limit.
See the FAQ thread at the top of the forum on “putting a footer at the bottom” as it is all explained there
Why won’t it work for you? You have the same number of elements to use.
However, I couldn’t see the images you were referring to (unless you’ve changed the page link I was looking at) so I may have mis-interpreted something :).
Hi there.
Sorry about that, I have the test pages up again at:
css2g.webatu.com/test.shtml (original question)
css2g.webatu.com/test2.shtml (Dec 19 attempt)
css2g.webatu.com/test3.shtml (Dec 21 attempt)
The footer sticky link that was to help me has the footer outside all other divs (including the wrapper div), which I don’t want to do. I would like the footer to stay inside the wrapper if possible. The reason for this is that I have a background image on the wrapper, bordertop (bdrt) and borderbottom (bdrb) are simply used for the curved shadow edges, header and footer. This helps me minimize my html page text and keeps things nicely lined up, easy to modify, as the footer uses the wrapper background image. However it does not seem to work nice on Opera, and maybe a few other obscure browsers. I would like the footer to stay at the bottom of the content, not stick at the bottom of the browser window. Hope I’m being clear.
Note: The footer image is the blue image and the bottom border curved shadow edges should be below that.
Example CSS with background images:
#bdrt {
background: url(“/pix/bdrt_776.gif”) no-repeat -1px 0;
height:41px;
}
#bdrb {
background: url(“/pix/bdrb_776.gif”) no-repeat -1px 0;
height:41px;
}
#wrapper {
text-align: left;
margin: 0 auto;
border:0;
width:776px; /* was 730 for inner width */
background:#848484 url(“/pix/background.gif”) repeat-y 50% 0;
min-height:100%;
position:relative;
}
#hdr1 {
margin:0;
width:708px;
height:325px;
background:#ffffff url(“/pix/divbanner.jpg”) no-repeat;
}
#ftr1 {
float:left;
margin-left:15px;
margin-top:8px;
min-height: 100%;
width:120px;
position:relative;
background: #ffffff url(“/pix/logo-grey-ws.gif”) no-repeat;
}
Here are the results: browsershots.org/http://css2g.webatu.com/original.shtml
Browsers with issues with footer:
Dillo / Ubunto 8,9
Konqueror 4.2 / Debian
SeaMonkey 1.1 / Win XP, Ubunto
MSIE 7.0 / Win XP (Could be OK)
MSIE 5.5 / Win 2000
Opera 9.8 / Win XP,Debian Testing (background image is below footer and bdrb)
Opera 10.0 / Win XP (background image is below footer and bdrb)
Also I noticed many of the browsers (50% -FireFox/Netscape/Navigator/MSIE 6.0 and earlier/old/Seamonkey/Avant/Kazhhakase/Iceweasel/Opera 7.5 old) have the top menu background image (black) across the entire width of the banner whereas it is supposed to be only behind the nav menu text on the right.
Hi,
The answer is still the same
Here’s your first page converted into fully working order using the techniques already mentioned.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title here</title>
<style type="text/css" media="screen">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/
}
html, body {
margin:0;
padding:0;
border:0;
height:100%;
}
body {
background: #848484;
min-width:776px;
text-align:center;
}
#bdrt {
background: url("http://css2g.webatu.com/pix/bdrt_776.gif") no-repeat -1px 0;
height:41px;
border-top:89px solid #848484;
}
#bdrb {
background: url("http://css2g.webatu.com/pix/bdrb_776.gif") no-repeat -1px 0;
height:41px;
width:776px;
margin:auto;
}
#wrapper {
text-align: left;
margin: -89px auto 0;
border:0;
width:776px; /* was 730 for inner width */
background:#848484 url("http://css2g.webatu.com/pix/background.gif") repeat-y 50% 0;
min-height:100%;
position:relative;
}
* html #wrapper { height:100%;}
.inner {
padding: 0 23px;
min-height:0;
}
* html .inner,* html #ftr2 {height:1%;}
#hdr {
clear:both;
height:325px;
/*width:100%;*/
background-color:#ffffff;
margin-right:22px;
overflow:hidden;
}
#hdr1 {
margin:0;
height:325px;
background:#ffffff url("http://css2g.webatu.com/pix/divbanner.jpg") no-repeat;
}
#hdr1 img {
margin-left:1em;
}
#ftr {
clear:both;
height:48px; /* 48px - Height of the footer */
background:#ffffff;
overflow:hidden;
width:730px; /* was 730 for inner width */
padding:0 23px;
background:#fff url("http://css2g.webatu.com/pix/background.gif") repeat-y 50% 0;
margin:auto;
}
#ftr1 {
float:left;
margin-left:15px;
margin-top:8px;
min-height: 40px;
width:120px;
display:inline;
position:relative;
background: #ffffff url("http://css2g.webatu.com/pix/logo-grey-ws.gif") no-repeat;
}
* html #ftr1{height:40px}
#ftr2 {
margin:0;
margin-top:6px;
min-height:0;
}
#container {
overflow: hidden;
margin-top:15px;
width:100%;
}
#sidea {
margin: 0;
float: left;
width: 495px;
position: relative;
margin-left:15px;
}
#sideb {
margin: 0;
float: left;
width: 220px;
}
h1 {
font-size: 120%;
color: #70A100;
margin: 10px 0 5px 0;
}
h2 {
font-size: 105%;
color: #707070;
margin: 10px 0 5px 0;
line-height: 18px;
}
h3 {
font-size: 100%;
color: #70A100;
margin: 10px 0 5px 0;
}
#h1bkgd h1 {
font-size:22px;
color:#FFFFFF;
font-weight:normal;
padding-top:37px;
}
a, a:visited, a:link {
color:#70A100;
text-decoration: none;
}
a:hover {
text-decoration: underline
}
p {
font: 82% Arial, Helvetica, sans-serif;
line-height: 1.0em;
color: #5B5B5B;
margin-top:.75em;
margin-bottom:.75em;
margin-left: 0;
margin-right: 0;
text-align: left;
}
#ftr2 p {
margin-top:.2em;
margin-bottom:.2em;
background-color:#ffffff;
margin-left:2em;
font-size:75%;
}
li {
font: 82% Arial, Helvetica, sans-serif;
line-height: 1.0em;
margin-top: 0.3em;
margin-bottom: 0.2em;
color: black;
}
ul {
margin-top: 1.0em;
margin-bottom: 1.0em;
}
/* Start Horizontal CSS Menu */
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
float:right; /* remove line if you want to be on left or full width */
height:33px;
font-size:.9em;
background: url("http://css2g.webatu.com/pix/bg.png") repeat-x top left;
font-family:Verdana, Helvetica, Arial, sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:right; /* choose which side the menu text floats left or right */
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}
ul.menu li a:hover, .current {
color:#fff;
background: url("http://css2g.webatu.com/pix/bg.gif") repeat-x top left;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
/*GREEN*/
ul.menu.green {
background-color:#ffffff;
}
ul.menu.green li a:hover, .menu.green li.current {
background-color:#6D6D6D;
}
/* End horizontal CSS menu */
#2col {
width: 100%;
padding:0;
height:96px;
margin:0;
}
#leftcol {
float:left;
width:170px;
margin:0;
}
#rightcol {
float:right;
width:297px;
margin:0;
margin-top:10px;
}
.clear {
clear: both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
h1, h2, p {
padding:0 10px;
}
#wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="wrapper">
<div id="bdrt"></div>
<div class="inner">
<div id="hdr">
<div id="hdr1">
<ul class="menu green">
<li><a href="contact.shtml" title="">Contact</a></li>
<li><a href="company.shtml" title="">Company</a></li>
<li><a href="services.shtml" title="">Services</a></li>
<li><a href="index.shtml" title="">Home</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="sidea">
<p>test data line 1</p>
<p>test data line 2</p>
<p>test data line 3</p>
<p>test data line 4</p>
</p>
</div>
<div id="sideb"></div>
</div>
</div>
</div>
<div id="ftr">
<div id="ftr1"></div>
<div id="ftr2">
<p>123 Street, some city in a country.</p>
<p>Telephone: 877-877-8777</p>
<p>bunch of menu links here</p>
</div>
</div>
<div id="bdrb"></div>
</body>
</html>
Just copy and paste and view in a browser while online to see if that’s what you meant.
If so the techniques are covered in detail in the Faq on putting a footer at the bottom at the top of the forum.
If that’s not what you meant then just shout
That looks great in the browsers! Thanks for your expertise.
The only thing I see are thin strips of the pale green wrapper background image inside the footer.
Here is your code: css2g.webatu.com/test4.shtml
My code is at: css2g.webatu.com/test5.shtml
There is still one green strip left at the bottom. I added:
#ftr2 { background-color:#ffffff; }
Hi, the problem is that it is the image, you need to make the <p> cover it up.
Changing the bottom margin of “#ftr2 p” to “0.03em” seems to do nicely
thanks and you’re right. Playing with the top and bottom margins and line height seems to affect it for #ftr2 p. Too bad I couldn’t just cancel out the background image in the entire footer or at least ftr2.
Yes, with that setup it is a bit awkward to hide the pale strips because of there is no real good way to do so. The way I have works right now but I am not sure if text resize will change it too much as to show the strips again :). You’re welcome though