...

View Full Version : CSS Footer Problem



Keltoi
12-23-2005, 12:52 PM
Hi All,

Can't seem to get my CSS footer to stay at the bottom and not overlay content text - sometimes it does, sometimes it doesn't - depends on the length of the content.
current CSS:
html, body, #container { min-height: 100%; width: 100%; height: 100%;}
html>body, html>body #container { height: auto;}
body { margin: 0; padding:0; }
#container { position: absolute; top: 0; left: 0;}
#content {margin-left: 0px; padding-bottom: 3em; height: auto;}
#footer {clear: both; bottom: 0; left: 50px; width:700px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#999999; border: none;}
/* hide from Mac IE5 */
/* \*/
#footer {position: absolute; }
/* */
/* Change in Opera 5+ (and some others) */
html>body div#footer {
position: static;
}
/* Change back in everything except Opera 5 and 6, still hiding from Mac IE5 */
/* \*/
head:first-child+body div#footer {
position: absolute;
}
/* */
Full sheet and example:
http://www.uk-webpages.co.uk/includes/styleMain.css
http://www.uk-webpages.co.uk/cell.asp

Any ideas?

TIA and happy holidays

Keltoi

harbingerOTV
12-23-2005, 02:46 PM
http://www.themaninblue.com/writing/perspective/2005/08/29/

link about the footerStick technique.

I had to fidle up your HTML and CSS a little to make it work for you. You need to kill alot of the absolute positioninig to make it work right. I didn't load in your Javascript so I don't know if the navigation slider is still in the right spot after all this.

Anyways in your HTML put the footer div here:


consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero
</div>

</div>
<div id="footer" align="center">
&nbsp;&copy; 2005 New Life Christian Fellowship&nbsp;
</div>
</body>

</html>


and the css I changed:



* {
padding: 0;
margin: 0;
}
html , body {
height: 100%;
}

body {
background-image: url(http://www.uk-webpages.co.uk/images/bk.gif);
background-repeat:

repeat-y;background-position: left;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%;
}
#footer {
width:700px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#999999;
margin-left:50px;
background-color: transparnet;
border-top: 1px solid #000;
position: relative;
height: 30px;
margin-top: -30px; /* For Certain IE widths */
}

#content {margin-left: 0px; padding-bottom: 3em; height: auto;}

.txt {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
#head {margin-top:0px;margin-left:50px;height:150px;width:700px;background-image:

url(http://www.uk-webpages.co.uk//images/globeStatic.jpg);background-repeat:

no-repeat;position:relative;}
#head h1 {display:none;}
#head h3 {display:none;}
#head img#mainLogo {display:block;}
#head img#printLogo {display:none;}
#head div#address {display:none;}
#head div#flashLogo {top:23px; left:12px; width:204px; height:50px; position:absolute;}

#menu {position:relative;margin-left:0 auto;top:125px;width:695px;height:25px;border-top:1px

solid #c69865;border-bottom:1px solid #d29051;background-color:#351d11;padding:5px 0 0

5px;z-index:0;background-image: url(images/sky.jpg);}
#menu a {position:relative;display:inline;margin:0 15px 0 20px;font:0.8em

arial,verdana;padding:0;z-index:20;text-decoration:none;color:#efc8aa;}
#slider {position:absolute;background-color: #efc8aa;border:1px solid

#d29051;width:85px;height:20px;padding:0;z-index:1;-moz-opacity:.4;filter:alpha(opacity=40);}

a {text-decoration:underline; color:#660000;}
a:active {text-decoration:none; color:#009999}
a:visited {text-decoration:underline; color:#009933}
a:hover {text-decoration:none; color:red}

#content

{margin-bottom:20px;top:160px;left:55px;width:690px;position:relative;min-height:400px;height:

expression(this.scrollHeight < 400? "400px" : "auto" ); font-family:Verdana, Arial, Helvetica,

sans-serif; font-size:10px;}

#content2 {margin-bottom:20px;margin-left:

185px;margin-top:10px;width:560px;position:relative;min-height:400px;height:expression(this.sc

rollHeight < 400? "400px" : "auto" ); font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;}


the thing I did have a bit of trouble with after relativing positioning things was the amount of space your #content2 had from the menu above it. IE liked it but FF I added 10px to it so that it would drop down some. Of course now IE is a 10px too low.

But the footer works right ;)

Keltoi
12-23-2005, 03:36 PM
Thanks for your reply and taking the time to tweek. Doesn't seem to work though. I've posted a test page at:
http://www.uk-webpages.co.uk/celltest.asp and
http://www.uk-webpages.co.uk/cellNotesTest.asp?nID=7 or
http://www.uk-webpages.co.uk/cellNotesTest.asp?nID=4

sheet at
http://www.uk-webpages.co.uk/includes/styleMaintest.css

I don't know, I've tried a number of versions and can't seem to get the footer to work right. I'm starting to think that just setting the background colour and letting it float over the content might be the way to go.

DOn't like to throw in the hat though... :(

harbingerOTV
12-23-2005, 04:22 PM
What browser are you using? It works fine for me on Opera * IE6 and FF.

on this link:
http://www.uk-webpages.co.uk/cellNotesTest.asp?nID=7

do you mean it's not working because the text overflows the footer? If so just give the #content2 a bigger bottom margin.


#content2 {margin-bottom:50px;margin-left:

185px;margin-top:10px;width:560px;position:relative;min-height:400px;height:expression(this.sc

rollHeight < 400? "400px" : "auto" ); font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;}



The footer has a negative top margin so it can move into the browser window. you just need to compensate the content2 for that.

Keltoi
12-23-2005, 11:27 PM
Sorry, was a bit blind there... :o

Have fiddled and got a good result, I see what you mean about the differance between IE and FF (about 15px) have added a hack to adjust:
#footer {
width:700px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#999999;
margin-left:50px;
background-color: transparent;
border-top: 1px solid #000;
position: relative;
height: auto;
margin-top: -15px; /* For Certain IE widths */
}
body>#footer {margin-top:-30px;} havn't got opera at the moment so havn't checked that (suppose I should download it...)

Once again thanks for all your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum