Website positioning

Hello everyone.

I apologise, you probably get alot of these but I need help!!

I am fairly new to CSS..the problems I'm having:

Www.leoliens.com

Looks almost exactly how I want it to look in IE but I can't get it to look right in firefox, it always leaves a gap at the bottom, I fixed this in IE by setting the containing to only being 100px high.

The CSS is:

Www.leoliens.com/CSS/mainlayout.CSS

Thanks for any help in advance!

What gap? I see no gap at the bottom (FF 3.6 / win7). can you attach a screen shot, or something?

I think the OP is referring to the page extending well beyond what I assume may be his footer element. I do see it in FF. Havent figured out yet whats causing it though.

I believe I have now fixed it?

I had positioned all my images using top or bottom which seemed to be the issue in firefox... I changed and edited the margins instead and it seems to work in IE, firefox and safari.

Hello Boburob,
You are using an image that does not repeat on the X axis very well. You probably only want to see the grass once...

Make a full width footer that shows your green colored bar and then place your grass image in the centered container.
Something like this -
d="link3">
<a href="alien_home.html"> </a>
</div>
<div id="test">

</div>
<div id="test2">
</div>
</div>
<div id="footer"></div>





And the CSS - html, body {


font-family:Arial;
height:100%;
width:100%;
background: url('images/test2.jpg') repeat ;

}

body
{
margin:0;
padding: 0;
text-align:center;
}

#content {
margin-left: 10%;


/*height: 100%;*/}

#header {
position: relative;
background: url('images/Newheadher.png') no-repeat;
height: 333px;
margin-left: 10px;
margin-top:0;
width: 1000px;
}

#maintext {
position: relative;
background: url('images/wrapbg4.png') no-repeat;
height: 500px;
padding-top: 0;
margin-top: -270px;
margin-left: -100px;
width: 1150px;

}

#link1 {
position: absolute;
margin-left:10%;
top:223px;
left: 70px;
}

#link1 a
{
display: block;
height:40px;
width: 150px;
text-decoration: none;
}
#link1 a:hover
{
background: url('images/testhover.png') no-repeat;
}
#link2 {
position: absolute;
margin-left:10%;
top:223px;
left: 230px;
}

#link2 a
{
display: block;
height:40px;
width: 150px;
text-decoration: none;
}

#link2 a:hover
{
background: url('images/testhover.png') no-repeat;
}

#link3 {
position: absolute;
margin-left:10%;
top:223px;
left: 390px;
}

#link3 a
{
display: block;
height:40px;
width: 150px;
text-decoration: none;
}


#link3 a:hover
{
background: url('images/testhover.png') no-repeat;
}
#background {
position: relative;
background: url('images/maintext.png') repeat-y;
padding-left: 120px;
margin-left: -100px;
margin-top:-116px;
padding-bottom: 110px;
width: 990px;
min-height:50%;
margin-bottom:-165px;
}


#test {
position: relative;
height: 200px;
background: url('http://www.leoliens.com/css/images/test.png') no-repeat;
width: 100%;
margin: 0 0 -35px;
}
#footer {
height: 35px;
width: 100%;
background: #4f6145;
}