Inline?

HTML & CSS
1

I cant figure out why the menu at the bottom of
http://fixmysite.us/coronadoshores/recreation/
seems not to align

2

Technically it IS aligning. , but since your span has TWO LINES … it’s causing the offset you are seeing. your inline block is TWICE as high as the other single line blocks.

Incidentally, you dont need the div around the UL.

Try this code on for size:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
				.nav {  padding:0; margin:0; background: #eee; overflow:  hidden}
				.nav li { float:left; margin:0; list-style:none; border-right:  2px groove #fff;-webkit-transform: skew(15deg,0);   position: relative}
				.nav a {display:block; padding:0; text-decoration:none; padding: .5em 1em ;-webkit-transform: skew(-15deg,0); background:}
				.nav li:hover { background: red}
				.nav li:first-child:hover:before { content:""; background: red; top:0; bottom:0; width:50%; position: absolute;-webkit-transform: skew(-15deg,0)}

.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu  {
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.circlemenu li{
display: inline;
margin: 0;
vertical-align: middle;
}

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
vertical-align: middle; 
}

.circlemenu a span{display:inline-block;  vertical-align: middle; }
.circlemenu a:after{ content:""; display:inline-block; width:0; height:100%; vertical-align: middle;   }

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

.circlemenu a:hover{
background: #a71b15;
}
		</style>
	</head>
	<body>
        <ul class="circlemenu"> 
          <li><a href="beachclub.php">Beach Club</a></li> 
          <li><a href="pools.php">Pools</a></li> 
          <li><a href="healthclub.php">Health Club</a></li> 
          <li><a href="tennis.php">Tennis</a></li> 
          <li><a href="roeder.php"><span>Roeder Pavilion</span></a></li> 
        </ul>		
	 </body>
</html>

If you want to be consistent you can wrap the text in all the links in a span, but it is not necessary