Huge space below CSS menu in FF

[Dada78]

I have put a horizontal CSS menu on this one page and it has this huge gap below the menu in FF, in IE it looks fine. I am not sure what to add to close that gap. I have tried some things but not sure why it is doing this or how to fix it. So I hope someone can help me out with this.

http://www.mesquitechristmas.com/weather/hw3.php

Here is the CSS for the menu.

#underlinemenu{
margin: 0;
padding: 0;
}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
}

* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}

#underlinemenu ul li{
display: inline;
}

#underlinemenu ul li a{
float: left;
color: black;
font-weight: bold;
padding: 2px 3px 4px 3px;
text-decoration: none;
background: #f4f4f4 url(images/menudivide.gif) top right repeat-y;
}

#underlinemenu ul li a:hover{
color: #800000;
background-color: #EEEEEE;
border-bottom: 4px solid #990000;
padding-bottom: 0;
}



-Thanks