CSS strangeness: Text menu items showing outwith their container

[davecoventry]

I have some CSS strangeness on http://localbuz.com/brod/.

The Top menu has a container

<div class="menu-main">
</div>

Within these is a series of menus: Home, Contact Us, etc.

<div class="menu-main">
<ul><li>
<a href="news">News</a>
<a href="pre-owned-boats">Pre-Owned Boats</a>
<a href="new-boats">New Boats in Stock</a>
<a href="marina-riviera">Marina Riviera</a>
<a href="contact">Contact Us</a>
<a href="home">Home</a>
<a href="?q=user">Log in</a>
</li></ul>
</div>

The CSS style sheet definition is as follows:

.menu-main {
background-image: url(../images/menu-shadow.jpg);
background-repeat: no-repeat;
background-position:bottom;
padding-top: 11px;
position: relative;
margin: 0 auto;
width: 865px;
height: 31px;
text-align: center;
}
.menu-main ul {
padding-left: 0px;
margin-left: 0px;
}
.menu-main ul li {
display: inline;
}
.menu-main ul li a {
padding: 8px 15px 8px 15px;
color: #74571e;
font-size: 11px;
text-decoration: none;
}
.menu-main ul li a:hover{
padding: 8px 15px 8px 15px;
font-size: 11px;
color: #d0c6b2;
text-decoration: none;
}

The menu-main container has a height of 31px, yet all the menu items are rendered below this.

How can I fix it so that the Menu Text is above the menu-shadow.jpg and within the menu-main container?

[IIM]

remove padding from main-menu class css property.

.menu-mains {
  background-image: url(../images/menu-shadow.jpg);
  background-repeat: no-repeat;
  background-position:bottom;//removing padding will solve your problem
  position: relative;
  margin: 0 auto;
  width: 865px;
  height: 31px;
  text-align: center;
}

You are adding more space leading to this issue,removing padding will solve your issue.

[davecoventry]

Thank you, IIM.

I've changed the css style as you suggested to:

.menu-main {
background-image:url(../images/menu-shadow.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding-top:11px;
position:relative;
margin: 0 auto;
width:865px;
height:31px;
text-align:center;
}

However, there is no change.

I was pretty sure that the spaces would make no difference, but you seemed so confident....

~ Dave

[designershiv]

Hi dave,

Just remove the padding-top:11px; in .menu-main

[IIM]

as i suggested remove padding-top will solve your problem

.menu-main {
background-image:url(../images/menu-shadow.jpg);
background-repeat:no-repeat;
background-position:bottom;

position:relative;
margin: 0 auto;
width:865px;
height:31px;
text-align:center;
}