Struggling to get a background image or color behind my menu items with a fixed height of 30px and centered text size of 16px. No matter what CSS I try, the background only matches the text height.
#menu-container {
/*float: left;*/
width: 960px;
margin:50px auto 0 auto;
height:50px;
}
#menu ul {
text-align: left;
height:50px;
}
#menu ul li {
display: inline;
background-image: url(images/menubutton.png);
background-repeat: no-repeat;
}
#menu ul li a {
text-transform: uppercase;
padding-right: 13px;
padding-left: 13px;
font-size: 16px;
/*line-height: 0.2em;*/
color: #000;
font-style: normal;
letter-spacing: 1px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
}
#menu ul li a:hover {
color: #ff0000;
text-decoration: none
}