Site displays in IE but really messes up in firefox

Hi
First off, this is one of 3 forums i use and you have no idea how much i have learned from here. Thank you all so much. Secondly, being the wrong side of 40 :) and only over the past 3 or 4 months been trying to learn html, css, php and mysql, i would appreciate it sooo much if you could "fix" my problem but "comment" inline where i went wrong. I have found this the easiest way for me to learn.

Ok , the problem. I have been building a site and viewing it in IE 7. All was going well til a friend dropped the bombshell. It is spread out all over the place in Firefox. I have read and searched and experimented for the last week or more to no avail. So with cap in hand and pride swallowed, im asking for assistance cause i cant do it myself.
The site is laid out Header spanning 3 columns, then the left column, the center column, the right column with the footer spanning all 3 columns underneath. Wht is happening is the footer part is being pushed up in between the middle and right columns in firefox but its fine in IE.

The css file is
* {
padding:0px;
margin:0px;
}

body {
background-repeat: repeat;
background-position: top;
background-color: #FFFFFF;
margin-left:5px;
background-image: url(../../images/background.gif);

}
#pageSurround {
width: 981px;
margin: 0px auto;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
background-color: #FFFFFF;
vertical-align:center;
}
#top {
background-image: url(../../images/top.gif);
font-family: Arial;
font-size: 14px;
color: #000000;
background-repeat: no-repeat;
background-position: bottom;
height:21px;
}
#logo {
background-image: url(../../images/logo.png);
background-repeat: no-repeat;
background-position: top;
height:100px;
}
#menu {
background-image: url(../../images/menu.gif);
background-repeat: no-repeat;
background-position: top;
height:21px;
margin-bottom:20px;
}
#bottom {
background-image: url(../../images/bottom.gif);
background-repeat: no-repeat;
background-position: top;
height:21px;
}
.boxTitleLeft, .boxTitleRight {
-moz-box-sizing:border-box;box-sizing:border-box;
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(../../images/boxTitleBg.gif);
height: 21px;
}
.headingstitle {
-moz-box-sizing:border-box;box-sizing:border-box;
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
}
.boxContentLeft, .boxContentRight {
-moz-box-sizing:border-box;box-sizing:border-box;
font-family: Arial;
font-size: 12px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding-left:8px;
padding-right:8px;
padding-top:8px;
background-color: #FFFFFF;
}
.boxFooter {
-moz-box-sizing:border-box;box-sizing:border-box;
color: #FFFFFF;
background-color: #FFFFFF;
left: 0px;
background-image: url(../../images/boxft.gif);
background-repeat:no-repeat;
background-position:top;
height: 9px;
margin-bottom:10px;
}
.colLeft {
-moz-box-sizing:border-box;box-sizing:border-box;
position: relative;
left: 0px;
width: 190px;
padding-left: 15px;
padding-right: 15px;
float: left;

}
.boxTitleMid {
-moz-box-sizing:border-box;box-sizing:border-box;
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(../../images/middle.gif);
background-position:top;
vertical-align:center;
height: 21px;
}
.viewcatbar {
-moz-box-sizing:border-box;box-sizing:border-box;
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(../../images/viewcatbar.gif);
background-position:top;
line-height:21px;
height: 21px;
}
.colMid {
-moz-box-sizing:border-box;box-sizing:border-box;
position: relative;
width: 598px;
float: left;
}
.boxFooterMid {
-moz-box-sizing:border-box;box-sizing:border-box;
color: #FFFFFF;
background-color: #FFFFFF;
left: 0px;
background-image: url(../../images/boxftMid.gif);
background-repeat:no-repeat;
vertical-align:top center;
height: 9px;
margin-bottom:10px;
}
.colRight {
-moz-box-sizing:border-box;box-sizing:border-box;
position: relative;
width: 190px;
padding-left: 15px;
padding-right: 15px;
right: 0px;
float: right;
}
.boxContent {
-moz-box-sizing:border-box;box-sizing:border-box;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding:8px;
font-family: Arial;
font-size: 12px;
background-color: #FFFFFF;
}

and the portion index page where the problem lies is

<span class="colLeft">
<?php include 'docs.php' ?>
<?php include 'catagories.php' ?>
<?php include 'googleads.php' ?>
<?php include 'stats_box.php' ?>
</span>
<span class="colMid" >
<?php include 'connection.php';
$page=$_GET['page'];
if($page == 'poll') {
include 'poll1.php';
}
if($page == 'lotto') {
include 'lotto.php';
}
if($page == 'news') {
include 'news.php';
}
if($page == 'fixtures') {
include 'fixtures.php';
}
if($page == 'register') {
include 'register.php';
}
$result = mysql_query("SELECT * FROM pages WHERE name='$page' ");
if($page > '') {
while($row = mysql_fetch_array($result))
{echo $row['header'],$row['body'],$row['footer'];
echo "<br />"; }
} else
{include 'article.php';}
?>
</span>
<span class="colRight">
<?php include 'announce.php' ?>
<?php include 'mailList.php'?>
<?php include 'poll.php' ?>
<?php include 'shop.php' ?>
</span>
</div>

<div id="bottom">
<div id="bottom">
<div align="center"><font size='1' color="#FFFFFF" face="Geneva, Arial, Helvetica, sans-serif"><strong><em><a href="/admin/admin.php"target="_blank">Admin</a></em></strong></font></div>
</div>
</div><center>

I hope that someone can help me out here.

Regards

Site displays in IE but really messes up in firefox

the_jesterr

londrum

the_jesterr

londrum

g1smd

the_jesterr

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week