Vertical alignment is an issue I'm facing; the content aligns at the top instead of the bottom:
The HTML snippet in question:
<div id="hor_menu">
<img src="header.jpg" border="0" style="float:left" width="200px" height="80px"/>
<ul>
<li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Home</a></li>
<li class="current"><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">News</a></li>
<li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Products</a></li>
<li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">About</a></li>
<li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Contact</a></li>
</ul>
</div>
The CSS rules being applied:
body {
margin:0;
padding:0;
}
#hor_menu *{
margin:0;padding:0
}
#hor_menu {
float:left;
width:100%;
background: #000 url('bg.jpg') repeat-x bottom;
font-family:Arial;
font-size:15px;
}
#hor_menu ul {
list-style:none;
}
#hor_menu li {
float:left;
}
#hor_menu a {
display:block;
padding:5px 13px;
text-decoration:none;
color:#fff;
}
#hor_menu a:hover {
background: #000 url('bg_hover.jpg') repeat-x bottom;
}
#hor_menu .current a{
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-khtml-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
background: #fff url('bg_current.jpg') repeat-x top;
color:#000;
}
Please note that the code provided above doesn't include any attempts to align content to the bottom.