margin differences in Firefox and IE

I have a site here:
http://www.menslineaus.org.au
You'll see in IE that the menu items on the left are separated by a 2px wide space that allows the gradient in the background to show through between each menu item. However in FF, there is no gap. I've had similar problems on the same page with a div not displaying a clearly specified margin in FF, though it showed in IE. Here's the CSS for the menu items (I've included all selectors, though the probably relevant one is the second one, where you can see top and bottom margin of 1px):


#vert-menu{
margin-top: 0px;
z-index:2;
width:145px;
padding-bottom:12em; /* To allow room for bottom dropdown */
float:left;
}


#vert-menu a, #vert-menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
border-width:0px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;

background-color: #2c6193;
border-left: 1px solid #81a5c7;
padding: 1px 1px 0px 13px;
margin: 1px 0px 1px 1px;
}

#vert-menu h2{
color:#3e6199;
}

#vert-menu a{
color:#3e6199;
background:#d9e7e8;
text-decoration:none;
}

#vert-menu a:hover{
color:#a00;
}

#vert-menu a:active{
color:#060;
background:#ccc;
}

#vert-menu ul{
list-style:none;
margin:0;
padding:0;
width:100%;
}



So what is it I don't get about CSS margins in FF?

Firefox collapses margins sometimes. I've actually never had this exact problem before but this fixes it
#vert-menu ul li {
float:left;
clear:right;
width:100%;
}
It doesn't effect IE either.
Good article here: http://www.andybudd.com/archives/2003/11/no_margin_for_error/

Aerospace, you're a genius. :thumbsup: I did turn up that link you suggested after I posted, and I guessed it was the collapsing margin problem, but a cursory read didn't reveal an immediate solution. I'll have to do some closer reading to work out why your solution works. Cheers.

Well, almost... Now there's a nice neat one pixel border around each menu item in IE, but in FF, it's got a two px border at the top and no border at the bottom. Come on Aerospace - I know you can do it! :D

You do know I'm not the only person who can help you right? You say what each browser is doing but you don't say which browser is showing it correctly.

Hmmm... odd. I replied to this yesterday, but it's not appearing. Must have screwed up somewhere. In answer to your questions:
Yes, Aero, I know others can help too, but every time I've asked a question on this forum, it's been you who's answered and fixed my problem. I'm amazed you have time for a life with us pests to save. :)

It is IE that shows what I want: a 1px border around the whole menu item. For the sake of completeness, the HTML looks like this:

<div id="vert-menu" style="background: url(images/menu-left-bg.jpg) repeat-y;">
<ul>
<li class="title">
<h2 style="background-image: url(images/menutitle-bg.jpg); background-color: none;
padding-top: 5px; padding-bottom: 5px;">
Main Menu</h2>
</li>
</ul>

<ul>
<li class="item">
<h2>
<a href="ServiceDirectory.aspx">Men's Services Database</a></h2>
</li>
</ul>
...

</div>

Try this for the relevant CSS, notice I removed the margins from the links.
#vert-menu a, #vert-menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
background-color: #2c6193;
border-left: 1px solid #81a5c7;
padding: 1px 1px 1px 13px;
margin:0;
}
#vert-menu ul li {
float:left;
clear:right;
width:100%;
margin-bottom:2px;
}
#vert-menu ul li ul li{
float:none;
clear:none;
margin-bottom:0;
}
I haven't tested this in IE yet.

that was great for FF, aero, but it caused the margin between menu items to disappear in IE. I fiddled a bit by adding margins to the <h2> tag only, but could not remove a 1 pixel difference between IE and FF. So I've resorted to conditional comments to iron out this last remaining irritation.

Thanks for your help again. Now I just have to work out how you did it exactly, so I learn from this experience rather than relying on you bailing me out again some time in the future! Cheers.