Forums

Hi all.

Im fairly new to hand coding in css/xhtml (read: Noob) and im really struggling with getting my footer to work correctly.

Basically want i want to do, is have a 100% width footer in blue with an repeating image attached to the top of the footer. Simple right?

Here is what i am trying to acheive with the footer:

http://imageshack.us/photo/my-images/7/pdwebsitelayout.png/

Ive hunted around and found what i though would work (using clear: both, etc) but no matter what i try, at the very most, all i get is the main blue area of the footer showing – i cant get the ‘grass’ image to show at all, let alone sit on top of the footer area.

The footer does have content in it (block lists) but ive collapsed it all to make it easy to read:

_____________________________

and the relevant CSS :

#container {
margin: auto;
width: 900px;
}

#footer {
background: url(“images/grass-footer.png”) repeat-x scroll 0 0 #00539B;
height: auto;
width: 100%;
position: absolute;
margin: 30px 0 0 0;
left: 0;
}

#footer .content {

height: 160px;
margin: 0 auto;
position: relative;
width: 900px;
}

#footer .footercontent {
color: #ffffff;
font: ‘helvetica’, ‘arial’;
font-size: 10pt;
width:900px;

}

_______

Any ideas? this is driving me n00b brain crazy!

Thanks