Center aligned horizontal menu problem

Hi,

I am working on the following menu and when I enter a long string for a menu link, that link goes above other links.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<style type="text/css">
	a { text-decoration: none; font-family: Verdana }
	#menu { padding: 10px 0 0 0; text-align: center }
	#menu li { display: inline }
	#menu a { display: inline-block; width: 90px; height: 75px; padding-top: 10px; background: #780000; color: #fff; font-size: 13px }
	</style>
</head>
<body>
	<ul id="menu">
		<li><a href=""><img src="image.jpg" /><br /><span>Places To See Around</span></a></li>
		<li><a href=""><img src="image.jpg" /><br /><span>About</span></a></li>
		<li><a href=""><img src="image.jpg" /><br /><span>Hours</span></a></li>
		<li><a href=""><img src="image.jpg" /><br /><span>Places To See Around</span></a></li>
		<li><a href=""><img src="image.jpg" /><br /><span>Contact</span></a></li>
		<li><a href=""><img src="image.jpg" /><br /><span>Support</span></a></li>
	</ul>
</body>
</html>

image.jpg is a 36x36 dummy image. Do you have any idea what’s wrong with this menu?

Thanks for any ideas.

Try adding vertical-align to the <a>s:

#menu a {
display: inline-block;
width: 90px;
height: 75px;
padding-top: 10px;
background: #780000;
color: white;
font-size: 13px;
[COLOR="#FF0000"]vertical-align: top;[/COLOR]
}

Thank you very much Ralph, that worked like a charm.