CSS strangeness.

davecoventry's picture

He has: 112 posts

Joined: Jun 2009

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>

.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?

They have: 3 posts

Joined: Jan 2013

You should probably give the UL tag a position:relative and a float:left element, then your padding-top:11px; will work for your ul.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.