I've got a strange gap in my page and have searched everywhere for an answer but have had no luck so far

This is the code for my page and I know that it is the .header-bottom div that is causing the problems but not sure how to fix it. I'm hoping someone out there will have some ideas as I'm all out

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<STYLE type=text/css>
.header-top { background-color:#990000;}
.tl div{background:url(lft-corner.gif) no-repeat top left;width:100%;}
.tl {background:url(rgt-corner.gif) no-repeat top right;width:100%;height:10px;}
#header h1 {font-size:1em;background:url(header-bg.gif) repeat-x top left; width:100%;height:40px;}
.header-bottom {background:url(base-bg.gif) repeat-x top left;width:100%;height:10px;}
#globalnav {background-image:url(nav-bg.gif); width:100%; height:30px;margin-top:0;}
#globalnav li{font-size:0.8em; line-height:30px;list-style:none;display: inline;}
<div id="header">
<div class="header-top">
<div class="tl"><div></div></div>
<div class="header-bottom"></div>
<div id="globalnav"></div>
Many thanks