creating a vertical css menu with images

[CesarePlay]

I need help to create a vertical css menu using images and an unordered list. I have tried google but nothing on vertical menus only for horizontal which I can do.

This menu has to be vertical as there are many links (12 in fact) and it must be images because the font does not render the same in Firefox and IE. Can anyone help with this? I create websites without using tables and using li properties seems the best bet to do this menu. I can place and image for the menu in the li in the code but then I can't use rollovers so I am hoping for an alternative way to get this menu working.

[maxxis]

How much different is the font that gets rendered?

What font is used?

[CesarePlay]

How much different is the font that gets rendered?

What font is used?

The difference is very bad. In IE the menu is near the tmiddle bottom and in Firefox the font is right at the bottom. I used Helvertica, Arial and sans-serif at font size 12pt. I tried pixels and that did not work and neither did em . I also tried line-height

[maxxis]

Use 12px and set the line height using !important for FF.

Code: Select all

/* Root Menu */
ul#navmenu a {
  border: 0px solid #FFF; 
  padding: 0 7px;
  display: block;

  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  background-image:url(img/bg.gif);
  
  width: 158px !important; /*For KHTML*/
  width: 100%; /*For IE*/
}

Something like that

[CesarePlay]

Ok. Thanks. I will try that.