100% height does not work with Firefox

Hello,

Im having an issue with firefox (or should that be IE), where the height of the page only fits the screen size.

Presumably this has to do with the fact i have set the height to 100% inside the wrapper. If anyone could provide any solutions that works with both IE and Firefox, id be grateful

Looking at the site through Firefox, the problem can be found at: http://www.sunbirduk.com/sunbird/web/site/news/news.asp

And the css code is:

html { height: 100%;
}
#wrapper {
z-index: 2;
margin-right:auto;
margin-left: auto;
position: relative;
width: 780px; /*width of title banner used means html page must be same size*/
height: 100%;
visibility: visible;
display: block;
background-color: #FFFFFF;
background-image: url(/sunbird/web/Templates/home_files/bottom.gif);
background-repeat: no-repeat;
background-position: bottom;
top:0;
margin-top: 0px;
overflow: visible;
border-right: 2.3px solid #E4C203; /* original was 1px */
border-left: 2.3px solid #E4C203; /* original was 1px */
}
.nav, .nav a, .nav a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #023880;
text-decoration: none;
font-weight: normal;
margin-left: 10px;
font-style: italic;
line-height: normal;
}
.nav a:hover {
text-decoration: none;
color: #FFCC00;
}
#navigation {
margin-left: 0px;
margin-top: 0px;
position: relative;
width: 154px;
display: block;
float: left;
z-index: 5;
}
#copy {
position: relative;
width: 432px;/*430*/
display: block;
float:left;
z-index: 6;
border-left-width:medium;
}
#news {
margin-top: 0px;
/* margin-right: auto; */
/*margin-left:auto; */
position: relative;
width: 188px; /*186*/
display: block;
float: left;
z-index: 6;
border-left-color: #000066;
border-left-style: solid;
border-left-width: 0.8px;
margin-right:auto;
}

#bottom {
height: 40px;
width: 100%;
display: block;
z-index: 1;
text-align: right;
vertical-align: bottom;
bottom: 0px;
position: relative;
right:35px;
}
#details {
position: relative;
width: 600px;
display: block;
float: left;
z-index: 6;
background-color: #ffffff;
}
#boat {
position: relative;
width: 715px;
height: 500px;
display: block;
float: left;
z-index: 6;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
margin-left: 4.5px;
margin-right: 4.5px;
}
p a {
color: #E4C203;
text-decoration: none;
font-weight: bold;
}
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
color: #023880;
text-decoration: none;
margin-left: 3px;
line-height: 12px;
vertical-align: top;
margin-bottom: 0px;
margin-right: 0px;
}
.txt {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
float: bottom;
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #023880;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
}
.terms {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}

#img1 a.visited
{
border-color:#FFFFFF;
color:#FFFFFF;
}
.ae_wisiwig {
background-color: #FFFFFF;
background-image: url(/home_files/spacer.gif);
background-repeat: no-repeat;
}