Positioning differences between IE and firefox

Hi, I am developing a photo sharing website and am having some positioning problems in firefox. All CSS elements position perfectly in IE. But in firefox there is a big gap between the header and the nav bar. I then have a content box that expands with the content that is place in it. This is done by vertically tiling the center of the graphic box. On IE the box expands fine. In Firefox the box doesn’t.

Here’s the CSS for the header and nav bar:

#header {
background-image: url(../images/header2.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 175px;
width: 770px
}

#menu {
border: none;
background-image: url(../images/navbar.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 57px;
width: auto;
}

Here’s the CSS for the 2 column content with the expanding box on the left column:

.page {
width: auto;
border-left: 550px solid #FFF;
border-right: 0px solid #993399;
border-top: 3px solid #FFF;
}

.section {
margin: 0;
width: 100%;
}

.col-A, .col-B, .col-C {
position: relative;
float: left;
}

.col-A {
margin-left: -550px;
margin-right: 1px;
width: 550px;
z-index: 2;
}

.col-B {
margin: 0 -3px 0 -2px;
width: auto;
}

.col-C {
color: white;
margin-left: 0px;
width: 0px;
}

/*stop coloumn overlapping*/
.clear {
clear: both;
}

.page > .section {
border-bottom: 1px solid transparent;
}

/*graphical backgrouds for column A – for map and photos*/
.col-A-topcap {
background-image: url(../images/col_top.jpg);
width: 550px;
height: 115px;
z-index: 1;
}

.col-A-center {
background-image: url(../images/col_middle.jpg);
text-align: center;
width: 550px;
height: 100px;
z-index: 1;
}

.col-A-bottom {
background-image: url(../images/col_bottom.jpg);
float: left;
width: 550px;
height: 143px;
z-index: 1;
}

Any ideas are welcome, thanks. Ajay

Also in #CSS _↴