Gap in IE6

[darkchicken101]

I'm designing a website for a school and have this strange bug in IE6.

http://dzina.co.uk/clients/elthorne/

Just under the top nav bar, there is a gap between it and the image.

This is the relevent CSS:

body {
background:#411c25;
font-family:Arial, Helvetica, sans-serif;
color:#fafafa;
margin:0;
font-size:100%; /*sets size of em at 16px*/
}

#wrapper {
width:48.75em;
margin:0 auto;
}

#topsep {
width:48.75em;
margin:0;
height:6px;
background:#6c2f3e;
background-image:url(images/navbg.gif);
background-repeat:repeat-x;
}

#nav1 {
height:1.25em;
padding:0 0.5em 0 0;
text-align:right;
color:#411c25;
line-height:1.25em;
width:48.25em;
background:#6c2f3e;
}
	
	#nav1 a {
	text-decoration:none;
	color:#ffce23;
	font-size:0.75em;
	}
	
		#nav1 a:hover {
		background:#ffce23;
		color:#6c2f3e;
		}
		
#imagerotator {
width:48.75em;
margin:0;
height:194px;
background-image:url(images/header/test.png);
}

#logo {
height:169px;
width:135px;
margin:0 0 0 50px;
background-image:url(images/ep1.png);
}

	#logo a{
	display:block;
	height:169px;
	width:135px;
	}
	
#logotop {
width:135px;
height:6px;
margin:0 0 0 50px;
background-image:url(images/ep2.png);
background-repeat:no-repeat;
}

<div id="wrapper">
	<div id="nav1">
            <a href="index.php">Home</a> |
            <a href="about.php">About Elthorne</a> |
            <a href="sitemap.php">Site Map</a> |
            <a href="contact.php">Contact</a>
          </div>

 	<div id="topsep"><div id="logotop"></div></div>
	<div id="imagerotator"><div id="logo"></div>
</div>

Any help appricated. Thanks

[Ini]

I don't see the gap..?

[darkchicken101]

I've made the page white and the gap grey so it is easy to see. It is something to do with the topsep div.

I don't see the gap..?

You're using Internet Explorer 6 right?

[Ini]

No IE7

Sorry didn't notice the 6 lol

[darkchicken101]

Here's a screenshot for those without IE6: