List style menu is not displaying in line - html

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

Answer 2

just change li { diplay: inline; } with li { display: inline; } it works.