Solid Block Menu: Not aligned properly using Firefox

[TheCrazyLexx]

1) Script Title:
Solid Block Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/style/cs...id-block-menu/
3) Describe problem:

I've using the solid block menu on my site and the implementation works perfectly when using IE7. But Firefox is a differen story, as the text/content part of the menu isn't properly aligned to the background image:



What's causing this behaviour in Firefox? Could somebody take a look at my testpage or the code below?


CSS

/* NavBlock */
.solidblockmenu{
margin: auto;
padding: 0;
float: center;
font: bold 13px Arial;
width:774px; 
height:34px;
border: 1px solid #494949;
border-width: 0px ;
background: black url(../img/blocknav/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(../img/blocknav/blockactive.gif) center center repeat-x;
}

.solidblockmenu .selected a, #solidblockmenu .selected a hover{ /*currently selected tab*/
background: transparent url(../img/blocknav/blockactive.gif) center center repeat-x;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 0px solid #FEC009; /*THEME CHANGE HERE*/
border-top-width: 5px ;
font:bold 13px Arial;
text-align:center;
line-height:18px;
z-index:100;
background-color: #000000;
background:transparent url(../img/blocknav/opaque.png); 
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border: 0 solid #494949; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: white;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:visited{
color: white;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #FEC009;
color: white;
}

<!--[if IE]>
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

#hauptmenu { 
width:774px;
height: 37px;
border: 1px solid #FF0000;
}

HTML:

	
	
<div id="hauptmenu" class="solidblockmenu">
<ul>
<li><img src="templates/{$theme}/img/blocknav/blockarrow.gif" width="95" height="34" align="left" alt="" /></li>
<li><a href="http://www.gamepals.de/">Startseite</a></li>
<li><a href="http://www.gamepals.de" rel="dropmenu1" >News</a></li>
<li><a href="http://www.gamepals.de/index.php?p=articles&area=1" rel="dropmenu2" >Artikel</a></li>
<li><a href="http://gamepals.blogspot.com/">Podcast</a></li>
<li><a href="http://www.gamepals.de/index.php?p=gallery&area=1" rel="dropmenu3" >Media</a></li>
<li><a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum" rel="dropmenu4">Intern</a></li>
</ul>
</div>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=index&categ=3&area=1">Allgemein</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=4&area=1">Microsoft</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=1&area=1">Nintendo</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=2&area=1">Sony</a>
</div>

<!--2st drop down menu --> 
<div id="dropmenu2" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=articles&categ=5">Playstation</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=13">Xbox</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=33">Wii</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=11">Nintendo DS</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=6">PSP</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=9">Gameboy Advanced</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=10">GameCube</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=16">Spezial</a>
</div>

<!--3st drop down menu --> 
<div id="dropmenu3" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=gallery&area=1">Gallerien</a>
<a href="http://www.gamepals.de/index.php?p=downloads&area=1">Downloads</a>
<a href="http://www.gamepals.de/index.php?categ=1&parent=0&p=downloads&area=1">Videos</a>
</div>

<!--4st drop down menu --> 
<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=team">Team</a>
<a href="http://www.gamepals.de/contact_1.htm">Kontakt</a>
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=jobs">Jobs</a>
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum">Impressum</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("hauptmenu", 0)
</script>
<br clear="all">

[Sliight]

Just looked at it in Firefox, and it's fine... I assume you fixed the issue?

[TheCrazyLexx]

Well, actually, no I didn't touch the side since yesterday?! Just checked and the buttons are still lower than the background image.

[TheCrazyLexx]

Anyone?

[tech_support]

Try changing this:

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

to this:

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
padding-top:0px;
text-decoration: none;
border-right: 1px solid white;
}

[TheCrazyLexx]

Nope, that doesn work. All it does it crop up some of the button space from the top.

FF:


IE: