FireFox vs Internet Explorer display position - worked at one point :(

I have a problem with my menu bar showing differently in IE and FF.

Its perfect in FireFox -



But in IE all the text is too high.



I know it should work because I had it working at one point, but I don't know what changed to make it stop working. It also looks the same in Opera as it does in IE. Opera usually looks the same as FF.

Can someone have a look for me please:

URLs edited out - problem solved.

(replace "dot" with .)

------------
CSS:

#submenu{
	width:967px;
	height:26px;
	float:left;
        color:#FFFFFF;
	padding:0 0 0 0;
	background-image:url(http://www.my-plague.net/bigfreebet/images/site/top_menu_bg.gif);
	background-repeat:repeat-x;
}

#submenu h2{
        display: inline;
	margin:0; 
        padding:0;  
}


#submenu a{
        font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	padding:0 18px 0 18px;
}

#submenu a:hover{
	font-size:12px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:underline;
	padding:0 18px 0 18px;
}

#submenu a.pagenow{
	font-size:12px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:underline;
	padding:0 18px 0 18px;
}

Code (markup):

HTML:

<div id="submenu"><h2><a href="#" class="pagenow">SPORTSBOOK</a></h2>|<h2><a href="#">RESULTS</a></h2>|<h2><a href="#">BET SLIPS</a></h2></div>

Code (markup):

thanks.

 

Problem solved. Mods please close thread.

 

And I'm sure everyone else who had the exact same problem, and would have benefited from the solution, thank you for not providing it.

 

No need for that attitude. I added a line-height to the h2 class