July 23, 200818 yr Hi all, I need a sticky footer that sits on top of the other content on the site. I have it working with the glorious Firefox, it works with IE 8 and 7.... ...but not IE6. I'm so tired... Here's my code: HTML: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="curvetop"></div> <div class="top">a<br />a</div> <div class="main"> <div class="menu">a</div> <div class="content">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah bl blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div> <div class="clear"></div> <div class="clear"></div> </div> <div id="basebox"></div> </body> </html> CSS: * { margin: 0; } html ,body { font-family: Arial, Helvetica, sans-serif; background-image:url(nav/skyday.jpg); background-repeat:repeat-x; background-color:#FFFFFF; background-attachment:fixed; text-align:center; margin:0; padding:0; height:100%; } .curvetop { /* The image for the curves at the top of the white page */ background-image:url(nav/curve.png); height:15px; width:800px; overflow:hidden; margin: 0 auto; margin-top:20px; } .main { /* Where the menu divs, text divs, & image divs sit */ width:800px; background-color:#ffffff; height:100%; margin: 0 auto; } .top { width:800px; background-color:#CC3300; margin:0 auto; } .menu { /* The navigation menu */ width:150px; background-color:#00FF00; float:left; margin-left:15px; } .content { float:left; background-color:#330000; width:420px; } .clear { /* Makes the menu push the bottom of the page down */ clear:both; } #basebox { width: 100%; height: 150px; background: url('images/grass.png'); background-repeat:repeat-x bottom; padding-bottom: 0; position: fixed; bottom: 0; left: 0; margin: 0 auto 0 auto; background-color:#330099; }
August 1, 200818 yr Author Sorry to be a necro and bump my own thread, but can anybody help with this?
August 1, 200818 yr I was about to post that link too - I found it yesterday when trying to solve that problem myself - it works pretty good.
August 2, 200818 yr Author Thanks for that, I have seen that link, but the problem is, I want my footer to stick to the bottom of the window, not the bottom of the page. Any advice?
August 2, 200818 yr Author Not quite. I want my footer to sit at the bottom of the window, so it's visible all the time, even if you scroll down. I realise this will hide some of the content behind it, but that's what I want. The footer linkElanMan posted puts the footer at the bottom of the page not the window. (Or it does in Firefox 3 anyway...) Thanks for your replies! Any ideas?
August 2, 200818 yr Assuming of course that the id of your footer is "footer". It won't work otherwise. It also won't work in IE6.
Create an account or sign in to comment