CSS HELP its for charity maaate!

1

hey all

making my first CSS layout site and even tho a simple design have come into some CSS problems already.

site here http://www.twenty-eleven.com/fidowebsite/index.html

works as i like in IE but in FF the footer comes up too high…

the boxes on right are floated in the content div

any help appreciated!!!

cheers


/* CSS Document */
 
/*==============================================================================*/
#logo{
 position : relative;
}
#container {
 position: absolute;
 width: 768px;
 left: 50%;
 margin-left: -385px;
}
/*==============================================================================*/
/*==============================================================================*/
#content{
 width: 768px;
 position: relative;
 text-align: left;
 padding: 20;
 height: inherit;
}
#content h1 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 100%;
 color: #CCCC33;
 background-color : transparent;
 text-align: center;
}
#content h2 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #CCCC33;
 background-color : transparent;
}
#content p{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 70%;
 font-weight: normal;
 color: #666666;
 line-height : 140%;
}

/*==============================================================================*/
#content_2{
 float: right;
}
/*==============================================================================*/
#content_3{
 float: right;
 padding-left: 20px;
 position: inherit;
}

/*=========navigation moves the BG image on rollover its split into top grey and bottom green===================*/

    #nav {
 position: relative;
 width : 768px;
 font: 80%/normal Verdana, Arial, Helvetica, sans-serif;
 background: #E6E7E4;
 background-image: url(webImages/nav_bg.gif);
 height: 30px;
      }
    #nav ul {
   margin:0;
   padding:0px 0px 0 50px;
   list-style:none;
      }
    #nav li {
      display:inline;
      margin:0;
      padding:0;
      }
    #nav a {
      float:left;
      background:url("webImages/tableftK.gif") no-repeat left top;
      margin:3;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #nav a span {
      float:left;
      display:block;
      background:url("webImages/tabrightK.gif") no-repeat right top;
      padding:3px 8px 3px 5px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav a span {float:none;}
    /* End IE5-Mac hack */
    #nav a:hover span {
      color:#FFF;
   background-position:100% -42px;
      }
    #nav a:hover {
      background-position:0% -42px;
      }
    #nav a:hover span {
      background-position:100% -42px;
   }
/*==============================================================================*/
#topnavigation{
 position: relative;
 text-align: right;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 60%;
 font-weight: normal;
 color: #666666;
 line-height : 100%;
 padding-right: 10px;
}
#topnavigation a{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color : #999999;
 background-color: transparent;
}
#topnavigation a:hover{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #CCCC33;
 background-color: transparent;
}
/*==============================================================================*/
#footer{
 position : relative;
 text-align: center;
 width: auto;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 60%;
 color:#666666;
 height: 34px;
 padding-top: 10px;
 background: url(webImages/footer_bg.gif) no-repeat;
 
 }

#footer a{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color : #999999;
 background-color: transparent;
}
#footer a:hover{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #CCCC33;
 background-color: transparent;
}