Gap between divs

Hey everyone

I’ve got this annoying gap between two of my divs, it doesn’t happen in FF but it does happen in IE and safari. I know there are quite a lot of these topics around and I had a look at them and tried to apply the fixes listed there but I still couldn’t get it to work

Here is the problem section from the markup:

<!-- Header -->
      <div id="header">
        <div id="logo">
                      <h1 class="text"><a href="http://localhost/wordpress/">philproj</a></h1>
            <p id="site-description">Just another WordPress site</p>

        </div>
		 <!-- Navigation -->
		 <ul>
          <div class="menu"><ul><li class="current_page_item"><a href="http://localhost/wordpress/" title="Home"><span class="left"></span><span class="text">Home</span><span class="right"></span></a></li><li class="page_item page-item-19"><a href="http://localhost/wordpress/?page_id=19" title="All Posts"><span class="left"></span><span class="text">All Posts</span><span class="right"></span></a></li><li class="page_item page-item-5"><a href="http://localhost/wordpress/?cat=3" title="Reading"><span class="left"></span><span class="text">Reading</span><span class="right"></span></a></li><li class="page_item page-item-7"><a href="http://localhost/wordpress/?cat=4" title="Podcasts"><span class="left"></span><span class="text">Podcasts</span><span class="right"></span></a></li><li class="page_item page-item-9"><a href="http://localhost/wordpress/?cat=5" title="Lectures"><span class="left"></span><span class="text">Lectures</span><span class="right"></span></a></li><li class="page_item page-item-11 current_page_ancestor current_page_parent"><a href="http://localhost/wordpress/?page_id=11" title="Forum"><span class="left"></span><span class="text">Forum</span><span class="right"></span></a></li></ul></div>
        </ul>
		<!-- !Navigation -->
      </div>
      <!-- !Header-->

Here are the elements from the stylesheet:

/* -- Header -- */

#header {
  width: 924px;
  border-bottom: 12px solid #ededed;
  position: relative;
  margin-bottom: 50px;
}

#header .rss { background: #ededed; position: absolute; bottom: 0 !important; bottom: -1px; right: 0; padding: 5px 6px; }

/* Logo */

#logo {
  background: #4e4e4e;
  padding-left: 32px;

  /* min-height hack for ie6 */
  min-height: 179px;
  height: auto !important;
  height: 179px;
}

#logo h1.text { padding-top: 30px; }

/* Navigation */

#header ul {
  background: #2d313d url('../../images/nav_bg.png') no-repeat top left;
  height: 37px;
  list-style: none;
  margin: 0;
}

#header ul li { float: left; }

#header ul li a {
  display: block;
  float: left;
  height: 37px;
  line-height: 37px;
  padding: 0 24px;
}

#header ul li.current_page_item .left {
  background: transparent url('../../images/current_left.png') no-repeat top left;
  float: left;
  height: 47px;
  width: 6px;
}

#header ul li.current_page_item .right {
  background: transparent url('../../images/current_right.png') no-repeat top left;
  float: left;
  height: 47px;
  width: 6px;
}

#header ul li.current_page_item .text { float: left; margin: 0 18px; }

#header ul li.current_page_item a {
  background: transparent url('../../images/current_center.png') repeat-x top left;
  height: 47px;
  line-height: 47px;
  margin-top: -5px;
  padding: 0; position: relative;
}

As well as the stylesheet from the child theme I’m using:

/* -- Header -- */
#header {
  width: 940px;
  }

/* -- Logo -- */

  #logo {
  min-height: 120px;
  height: auto !important;
  height: 120px;
  }

  #logo h1.text { padding-top: 5px; }

/* -- Navigation -- */
  #header ul {
  background: #2d313d url('images/nav_bg.png') no-repeat top left;
  }

  #header ul li.current_page_item .left {
  background: transparent url('images/current_left.png') no-repeat center;
  }

  #header ul li.current_page_item .right {
  background: transparent url('images/current_right.png') no-repeat center;
  }

  #header ul li.current_page_item a {
  background: transparent url('images/current_center.png') repeat-x center;
  }

And finally the section in the header.php file:

<!-- Header -->
      <div id="header">
        <div id="logo">
          <?php if(agile_check_option('logo') && get_option('agile_header_type') == 'Logo') { ?>
            <h1><a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_option('agile_logo'); ?>" alt="<?php bloginfo('name'); ?>"></a></h1>
          <?php } else { ?>
            <h1 class="text"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
            <p id="site-description"><?php bloginfo('description'); ?></p>
          <?php } ?>
        </div>
		 <!-- Navigation -->
		 <ul>
          <?php wp_page_menu('show_home=1&title_li=&depth=-1&link_before=<span class="left"></span><span class="text">&link_after=</span><span class="right"></span>&include='.get_option('agile_nav_pages')); ?>
        </ul>
		<!-- !Navigation -->
      </div>

I currently don’t have a host since I’m building the site locally first, so I can’t link to it unfortunately but hopefully I included all the relevant information, if not just tell me and I’ll put it in. Does anyone have a solution for this?

Thanks