<div> height rendering issue with Firefox - firefox

Question

I created a div that transitions from a beginning height to a larger height, revealing a list. It looks fine in web-kit browsers but in Firefox the div appears to come up short, cutting off the bottom of the list.
I tried setting the div height in em hoping that the div would then match the height to the font size used in the list. Still the same thing occurs.
Any ideas?
CSS:
#nav{
padding:0;
position:fixed;
top:27px;
left:27px;
font-family:arial;
font-size:10px;
background-color:#ccc;
width:11.3em;
height:5.5em;
overflow:hidden;
transition: height .5s;
-webkit-transition: height .5s; /* Safari */
}
#nav:hover{
height:22em;
}
#nav a.bg:hover{
background-color: #ccc;
}
#nav a{
text-decoration:none;
color:#000;
}
#nav a:hover{
background-color:#6a6a6a;
}
HTML:
<div id="top">
<div id="nav">
<!--logo_image-->
<a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b></div>
<div style="height:1em;"></div>
<div>Ahnnu</div>
<div>Gem Vision</div>
<div>Dope Body</div>
<div>Co La</div>
<div>Teenage Souls</div>
<div>Kid Krusher</div>
<div>Lil Jabba</div>
<div>Cex</div>
<div>Teeth Mountain</div>
<div>Jimmy joe Roche</div>
</div>
</div>

Answer 1

U have 2 options I think:
One is called CSS reset - http://html5reset.org/
The second one is called Normalize. Instead of resetting all styles, it targets the ones that need to change to give you sane, consistent results across browsers in a smaller file size. http://necolas.github.com/normalize.css/