Question

Here you can see the code: http://jsfiddle.net/LQSK3/1/

I can’t get display: inline; working there for every li element.
Also got the problem width the line.png image, as it’s height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.

Where is the problem?

Answer 1

You need to update your style sheet. Please add this new style:

#menu {
  position: relative;
  clear: both;
  top: -3px;
  background-color: coral;
  border: 1px solid black;
  width: 800px;
  height: 35px;
  float:left;
}

li { display: inline;float:left; }

#menu ul {
   position: absolute;
   font-family: Century Gothic, sans-serif;
   font-size: 14px;
   list-style-type: none;
   padding: 0;
   margin: 9px 0 0 123px;
   width: 649px;
   height: 39px;
   color: #FFF;
   float:left;
}

a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }

#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}

You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.

Here is a working sample : http://jsfiddle.net/YjeBs/

Hope this helps 🙂

EDIT:

If you want your line to extend from top to bottom of the menu div you can change your styles to:

#menu {
   position: relative;
   clear: both;
   top: -3px;
   background-color: coral;
   border: 1px solid black;
   width: 800px;
   height: 35px;
   float:left;
}

li { 
float: left;
    height: 35px; 
    display:inline;
}

#menu ul {
color: #FFFFFF;
    float: left;
    font-family: Century Gothic,sans-serif;
    font-size: 14px;
    height: 35px;
    list-style-type: none;
    margin: 0 0 0 123px;
    padding: 0;
    position: absolute;
    width: 649px;
 }

 a { font-weight: bold; color: red; text-decoration: none; }
 a:hover { text-decoration: underline; }

 #menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
    float: left;
    height: 29px;
     margin: 0 5px;
    padding-top: 8px;
    width: 65px;
 }

Hope this is you want 🙂