Question

I am pretty new at CSS but have been learning, doing my moms small business website to save her money but I’m having a little CSS trouble with my nav bar.
Basically if you go here: http://area25dallas.com/s and look at the nav bar, I’m having trouble with the il listing to have the images line up vertically (instead of aligning with the top which is what they currently do) with the text, also for some reason the images are going on top of each other instead of sitting next to each other (I don’t want them in separate lists like the text links because the margins are too spread out).

I have been playing around with the CSS and also googled the hell out of this but still haven’t found a solution. Is there any quick fix to this?

Thanks!

EDIT:
Here is the HTML and CSS blips though if you are using chrome I feel just inspecting the elements are the easiest way to see what’s going on

<div id = "header">
  <div class = "container">
   <a href = "index.htm" id = "logo"></a>
<ul id = "main-menu">
<li class = "active"><a href = "">home</a></li>
<li><a href = "">about</a></li>
<li><a href = "">gallery</a></li>
<li><a href = "">press</a></li>
<li><a href = "">contact</a></li>
<li><a href = ""><img src="images/twitter_newbird_boxed_ white.png" /></a>
<a href = ""><img src="images/Pinterest_Favicon white.png" /></a></li> 

</ul>

   </div>
</div> 

and the CSS

#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}

#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}

Answer 1

The images are broken onto multiple lines because they reside inside an <a> tag which has been styled as a block level element. Change the style to something like:

#main-menu {
    float: right;
    position: relative;
    right: 75px; /* Changed */
    top: 122px;
}

#main-menu li a {
    color: #fff;
    display: inline-block; /* Changed */
    font-size: 17px;
    padding: 0 15px 5px 10px;
    text-decoration: none;
}

/* New */
#main-menu li a img {
    position: relative;
    top: -10px;
}

The new rule at the bottom moves the images up a little bit. You can play around with your css and get the same results in a lot of different ways – I went with a method that didn’t involve many changes to the existing work.