Gap between divs issue when switching doc to html5

Question

I have a banner div w/image and a nav bar div immediatly below it, both at 100% of container at 960px. I now have an annoying gap of about 5px between the two. I had switched the doc from xhtml 1.0 transitional to html5. When I switch the doc type back to 1.0, the gap goes away. Does anyone know why this might happen? Could it be because I'm not using the html5 tags, like <nav>? I thought that using an html5 doc type does not replace the option to use the older html tags, but maybe I'm wrong. The code is below. Thank you.
<div id="banner"><img src="images/imageone.jpg" width="959" height="132" alt="alt text"/>
  </div>
  <div id="navbar">
    <ul id="site_nav" class="MenuBarHorizontal">
      <li><a href="index.php">Main</a></li>
      <li><a href="wp/index.php">Blog</a></li>
      <li><a href="datasources.html">Data</a></li>
<li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a> </li>
    </ul>
  </div>

Answer 1

Quahog68 wrote:
Could it be because I'm not using the html5 tags, like <nav>? I thought that using an html5 doc type does not replace the option to use the older html tags, but maybe I'm wrong. The code is below. Thank you.
Yes, you need to add display: block; to the new html5 tags
<nav>
Whatver
</nav>
nav {
display: block
OOps sorry I read it as though you WERE using html5 tags ....... hmmmm you could still try adding display: block; to the banner and navigation <divs>
I'm also not sure why adding a html5 doctype would cause a gap. Maybe the image in the banner needs setting to display block as well.