Problems with css positioning - help please :-)

Hello

I am just trying out my first css design and I have come up against a
problem. I am trying to line a number of elements up with the bottom
edge of a container div. Al's fine in IE but Firefox isn't happy.

I'd be really grateful if someone could take pity on me and help me
out. I've uploaded the page to http://indigowebdesign.co.uk/training/css/scratch2.html
and the css is below:

#upperBox {
width: 100%;
height:244px;
background-image: url(../images/upper_bg.jpg);
}

#topBanner {
width: 80%;
margin-left:10%;
margin-right:10%;
margin-top:20px;
height:25px;
background-color:#999999;
}

#mainNav {
width: 80%;
height:20px;
background-color:#FF6600;
margin-left: 10%;
margin-right: 10%;
}

#mainImg {
width: 80%;
height:179px;
background-color:#FFCC00;
margin-left: 10%;
margin-right: 10%;
}

body {
margin:0px;
background-image:url(../images/gradient_bg.jpg);
}

Thanks in advance!

Jo