gap in FF, Moz, Op

and not in IE

[stef25]

below is a snippet of validated code which causes FF Moz and Opera to create a gap of a few px between the banner.jpg and the horizontal navigation list "topnav", which sits parallel to the banner.jpg.

the list is 6 "cells" total of 680 wide (suckerfish dropdowns). In the case of IE, the list sits neatly against the bottom of the banner.

any ideas how i can remove this gap? many thanks, stef

<div id="container">
<div id="banner"><img src="banner.jpg" height="92" width="680"/></div>

<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Contact us</a></li>
</ul>

#container {width:680px;}

#banner {}

#topnav, #topnav ul { /* all lists */
list-style: none;
font-size: 12px;
padding: 0;
margin: 0;

[stef25]

fixed by changing the #banner to a class for the image and then assigning display:block to that class.

should have searched all the valueble info here first ...

(keywords: remove gap under image css dispay block)