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:

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