Vertical white space in Firefox

Hi,

I'm trying to eliminate some vertical white space between two pictures that are stacked on top of each other. The problem only occurs in Firefox and I've done some googling on the subject and I think I need display: block; on the div in question but it doesn't seem to be working and I wondered if I'm doing something really silly?

Any help would be much appreciated!

Xhtml:

www.example.com

Welcome to www.example.com

CSS:

body{
margin:0;
padding:0;
font: 1.0em;
font-family: Arial, Verdana, Geneva, sans-serif;
line-height: 1.2em;
text-align: center;
height: 100%;
width: 100%;
background-color: #b2cfe6;
background-image:url(cssimages/background6.gif);
background-repeat: repeat-y;
background-position: center;
}

div#container{
position: relative;
top: 0px;
min-width: 770px;
width: 770px;
margin: 0 auto;
text-align: left;
background-color: transparent;
}

div#nav{
display: block;
border: none;
}

div#content{/*Size of main content text in firefox, opera etc.*/
font-size:1.0em;
margin:10px;
}

* html div#content{/*Size of text in IE*/
font-size:0.75em;
}

div#content h1{font-size:1.2em; font-variant:small-caps; font-family: Arial, Verdana, Geneva, sans-serif; color:#000000;}
div#content h2{font-size:1.2em; font-variant:small-caps; font-family: Arial, Verdana, Geneva, sans-serif; color:#000000;}
div#content h3{font-size:1.2em; font-variant:small-caps; font-family: Arial, Verdana, Geneva, sans-serif; color:#000000;}