[AS GOOD AS SOLVED] vertical menu in Firefox differs from all other browsers

[frankmanl]

CMSMS 1.5.4

I made my own css for a vertical menu (simple_navigation.tpl).
I have all menu items replaced by truetype images (font is Interstate), for which I integrated FLIR (http://facelift.mawhorter.net/) in my cms. That all works well.
Strange thing is that the distance between menu items is correct in IE8, Safari, Opera, Google Chrome, but not in Firefox (I use updated versions of all those browsers).
See http://www.storytellingcentre.nl/home/ for the site I'm working on.
In Firefox the distance between items is too big.

Here's the stylesheet I use.
The first part of the sheet is about font size, color etc., the second part about the positioning:

/*  APPEARANCE  */
#sidebar li {
  font-family: 'interstate', Arial, sans serif;
  font-size: 14px;
}
#sidebar ul li {
  list-style: none;
  display: block;
}
div#sidebar ul a {
  text-decoration: none;
  display: block;                          /* IE has problems with this, fixed below */
  color: #000000;
}
div#sidebar ul a:hover {
  background-color: transparent;
  color: #2957A0;
}
div#sidebar ul a.activeparent:hover {
  background-color: transparent;
  color: #2957A0;
}
div#sidebar ul li a.activeparent {
  background-color: transparent;
  color: #2957A0;
}
#menu_vert ul ul li {
  border: none;
  font-size: 12px;
  color: #3F3D3E;
}
div#sidebar ul ul a {
  font-size: 12px;
  color: #3F3D3E;
}
div#sidebar ul ul li a.activeparent {
  color: #2957A0;
  font-size: 12px;
}
div#sidebar ul ul ul {
  font-size: 12px;
}
div#sidebar ul ul ul a {
  font-size: 12px;
}
/* IE FIX - BUG IN DISPLAY: BLOCK; */
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/* END FIX */
/* current pages unclickable */
/*  FIRST LEVEL CURRENT PAGE */
div#sidebar ul h3 {
  background-color: inherit;
  display: block;
  color: #2957A0;
  font-size: 14px;
}
/* SECOND LEVEL CURRENT PAGE */
div#sidebar ul ul h3 {
  font-size: 12px;
  background-color: transparent;
  border-bottom: none;
  color: #2957A0;
}
/* THIRD LEVEL CURRENT PAGE */
div#sidebar ul ul ul h3 {
  color: #2957A0;
}
div#sidebar li.sectionheader {
  border-right: none;
  font-size: 14px;
  font-weight: bold;
  padding: 1.5em 0 0.8em 0;
  background-color: #fff;
  line-height: 1em;
  margin: 0;
  text-align:center;
}
div#sidebar li.separator {
  height: 1px !important;
  margin-top: -1px;
  margin-bottom: 0;
  padding:2px 0 2px 0;
  background-color: #000;
  overflow:hidden !important;
  line-height:1px !important;
  font-size:1px; /* for ie */
}
div#sidebar li.separator hr {
  display: none; /* this is for accessibility */
}


/*****************/
/*    POSITIONING    */
/****************/
#sidebar ul {
  padding: 0 12px 0 20px;
  margin-bottom: 20px;
}
#sidebar ul ul {
  padding: 0 5px 0 15px;
  margin: 10px 0 0 0;
}
div#sidebar ul ul ul {
  padding: 0 5px 0 0;
  margin: 10px 0 0 0;
}


#sidebar ul li {
  margin: 0 0 10px 0;
}
#sidebar ul ul li {
  margin: 0 0 10px 0;
  padding-left: 10px;
  background: url(uploads/css/menubullet.png) no-repeat 0 2px;
}
#menu_vert ul ul ul li {
  margin: 0 0 10px 0;
  background: url(uploads/css/menubullet.png) no-repeat 0 top;
}
div#sidebar ul a {
  min-height:1em;                      /* Fixes IE7 whitespace bug */
}
div#sidebar ul h3 {
  margin: 0;
}
div#sidebar ul ul h3 {
  margin: 0;
}
div#sidebar ul ul ul h3 {
  margin: 0;
}
div#sidebar img{
  padding: 0;
  margin: 0;
}

Can anyone help to solve this?
I'm used to IE being a troublemaker, but Firefox...?  

Frank

[Peciura]

in firebug your menu item  looks like this



   
   
   
   
     
   
   
   
   
   
   

in your css div#sidebar ul a is set to block, so your 3-rd tag.

For the beggining you have

• to remove 3-rd  (i think you have to modify menu template),
• or to set div#sidebar ul a display: ilnline;
• or to add to #sidebar ul li
                  height:18px; //(as in body {line-height:18px;}) and
                  overflow: hidden;

[frankmanl]

Thank you, Peciura.
I don't really understand the template, could not find out where that third img is created, but changing display:block; to display:inline; almost does the trick.
There's still a slight difference between Firefox and the other browsers, but I can live with that.

Frank