Question

I’m having a problem with the vertical alignment; it aligns to the top when I want it to be at the bottom:

My HTML code is:

<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>

My CSS code is:

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;
  }

NOTE: the code above DOES NOT have any attempt to align to the bottom.

Answer 1

One way to fix this is to use display:inline-block; vertical-align:bottom.

#hor_menu ul, #hor_menu img {
    vertical-align: bottom;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}

See: http://jsfiddle.net/thirtydot/XYrWZ/3/