Member Avatar for davecoventry

I have some CSS strangeness on

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?

  • 3 Contributors
  • 4 Replies
  • 183 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by IIM

Dani AI

Generated

Quick diagnosis: two things stand out from the thread. First, suggestions from and about the wrapper’s vertical spacing are on the right track, but post #2 contains a selector typo (.menu-mains) and post #3 still shows the top padding present — which points to either editing the wrong stylesheet or a caching issue. Second, the HTML shown uses a single <li> to hold every <a>. That markup is invalid for a list and can produce unpredictable layout results; each menu link should be its own <li>.

Practical fixes that work together: make each list item an inline-block so it participates in the line box, and vertically center the links by giving the links a line-height equal to the wrapper height (or remove vertical padding from the links). A compact example (not the same code shown earlier) that commonly fixes this is:

.menu-main ul li { display: inline-block; vertical-align: middle; }
.menu-main a      { display: inline-block; line-height: 31px; padding: 0 14px; }

Alternate approaches: remove the fixed height on the wrapper and let it expand to fit the link boxes, or increase the wrapper height to accommodate existing anchor padding. If the shadow graphic itself is taller than the wrapper and visually overlaps the links, place that shadow as a separate positioned element (or pseudo-element) so the menu text and the shadow don’t fight for the same vertical space.

Troubleshooting checklist (no assumptions): verify the correct CSS file is being edited, clear browser/server cache, inspect the computed box model in developer tools to find which rule is adding extra height (padding, margin, line-height or an overridden rule), and correct the .menu-mains typo seen earlier. Converting each link into its own <li> and using inline-block + matching line-height will usually make the text sit cleanly above the shadow.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for designershiv

Hi dave,

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

Member Avatar for 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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.