Darstellung von background-images innerhalb eines <a> Elemetes

[HoschMOsch]

hallo,

kann mir jemand sagen wieso bei dem untenstehendem code die <a> Elemente im Menu beim IE genau 42px hoch sind und beim FF nur so hoch wie der Text des Menues ?

ich verstehe es gerade garnicht

PS: die background-imgages sind übrigens genau 42px hoch.

<div id="head">  
		<div id="mainmenu" style="background-image:url('mainnav-ac.jpg'); background-repeat:repeat-x;">  
			###MAINMENU###<a href="universal-vorlage.html">Menu 1</a>&nbsp;<a href="universal-vorlage.html">Menu2</a>  
		</div>  
		<div id="logo">  
			###LOGO###  
		</div>  
	</div>  

  
#head {  
	background-image:url('header.jpg');  
	background-repeat:no-repeat;  
	height:260px;  
	position:relative;  
	  
}  
  
#mainmenu {  
	position:absolute; top:182px; left:10px;  
	height:42px;  
	text-align:center;  
}  
  
#mainmenu a{  
	 background-image:url('mainnav-no.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:14px;  
	 color:black;  
}  
  
#mainmenu a:hover{  
	 background-image:url('mainnav-ro.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:14px;  
	 color:black;  
}  
  
#mainmenu a:active{  
	 background-image:url('mainnav-ac.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:14px;  
	 color:white;  
}