making a footer stick to the bottom of the page

I am having a nghtmare with some code on a site I am making, should be pretty simple but it isn't proving so.

I want my footer to stick to the bottom of the page, but for all the content to come first (when there is more than a page worth, if that makes sense)

I have been able to do it in Safari, Chrom and Firefox but suprise suprise Internet Explorer is proving to be the main problem.

Am at a point now where it is on the bottom however the footer appears over the content of the page when there is alot (See the 'Who we are' tab).

http://www.break-comms.com/index.html

I would really appreciate any help whatsover on this as it is really begining to annoy me, been going back an fort changing code for a good few hours now.

Below is the CSS that accompanies the page, like I said any help on this would be REALLY appreciated.

  • { border:0px; margin:0px; padding:0px; }

html {

height:100%; }

banner {

padding: 5px 0px 10px 0px;

}

container {

width:970px; margin:0 auto; height: 100%; position: relative;

}

wrapper {

position: relative; min-height: 100%;

}

nav {

margin-left:0px; text-indent:0px; text-align:center;

}

menutab li {

display:inline; list-style-type:none; font-family:Arial; font-size:18px; font-weight:100; text-align:center;

}

menutab a {

color:#9ea3ab; padding:5px 32px 5px 32px; text-decoration:none; text-align:center;

}

menutab b {

color:#9ea3ab; padding:5px 0px 5px 0px; text-decoration:none; text-align:center;

}

menutab a:hover {

color:#28957f;

}

social .socialImage{float:right;

}

.divFloat { float:right; padding:0px 5px 0pc 0px; }

.clear { clear:both; }

social {

background:transparent;

}

footer {

Position:fixed; bottom:0; width:970px; height:45px; background-image:url(images/footer.gif); width:970px; height:45px;

}

footermenu .footermenu{float:right;

}

footermenu li {

display:inline; font-family:Arial; list-style-type:none; font-size:16pt;

}

footermenu a {

color:#9ea3ab; font-family:Arial; padding:0px 5px 0px 0px; text-decoration:none; text-align:right;

}

footermenu a:hover {

color:#28957f;

}

.clearfooter { height:45px; clear:both; }

address {

color:#28957f; font-family:Arial; font-size:16px; text-indent:5px;

}

address2 {

color:#9ea3ab; font-family:Arial; font-size:14px; text-indent:5px;

}

contentbackground {

background-image:url("images/homebackgroundimage.gif"); width:970px; height:400px;

}

contentbackgroundcontact {

background-image:url("images/contactbackgroundimage.gif"); width:970px; height:330px;

}

contentbackgroundyouth {

background-image:url("images/youthbackgroundimage.gif"); width:970px; height:350px;

}

contectbackgroundwhoweare {

background-image:url("images/whowearebackgroundimage.gif"); width:970px; height:700px;

}

contentbackgroundmusic {

background-image:url("images/musicbackgroundimage.gif"); width:970px; height:360px;

}

contentbackgroundbrand {

background-image:url("images/brandbackgroundimage.gif"); width:970px; height:500px;

}

content {

color:#9ea3ab; font-family:Arial; font-size:14px; padding:5px 30px 5px 50px; text-decoration:none; text-align:top;

}

content2 {

color:#9ea3ab; font-family:Arial; font-size:14px; padding:5px 30px 5px 70px; text-decoration:none; text-align:top;

}

contentcontact {

color:#9ea3ab; font-family:Arial; font-size:16px; padding:5px 30px 5px 50px; text-decoration:none; text-align:top;

}

h1 { color:#9ea3ab; font-family:Arial; font-size:16px; padding:5px 30px 5px 35px; text-decoration:none; text-align:top; }

body { height: 100%; background-image:url("images/denimbackground.gif"); repeat; }

--------------Solutions-------------

Works for me if I remove the position:absolute in the #footer CSS directive.
Including in IE.

Category:css Time:2011-02-20 Views:0

Related post

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.573 (s). 13 q(s)