Member Avatar for dwlamb

I am having a challenge with a hover state and css. In this the background bleeds down. This is the code for regular state:

#navigace ul.menu li a {
    display:block;
    font-size:11px;
    font-weight:bold;
    line-height:37px;
    padding:0 20px;
    text-transform:uppercase;
}

To get rid of the bleed state, all I could find that would work was

#navigace ul.menu li a:hover {
    display:inline;
}

However, if the user hovers over the active menu item - as in the background effect changes to only encompass a smaller area of the anchor, not the whole menu item.

Input for how to rectify this so the hovered on menu item does not bleed down would be most appreciated.

Edited by dwlamb because: grammar fixes
  • 3 Contributors
  • 6 Replies
  • 189 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Short version: this looks like a Firefox rendering quirk caused by how inline-block elements sit on the line box. was right to try inline-block, and was right to warn against switching the display type on hover (changing display between normal and :hover will change the box and shrink the hover area). Because the problem is Firefox‑only, the likely culprit is baseline alignment / sub‑pixel rounding rather than your padding or line‑height.

Why it happens: inline‑block elements align to the baseline by default, which can leave a 1–2px gap for descenders. Different engines handle the line box differently, so Firefox may appear to let the anchor’s background “bleed” beyond the intended height. You can confirm quickly in the inspector by toggling a vertical-align value or by adding a temporary outline to see the element bounds.

Two simple fixes to try (in order):

  • Force the inline‑block anchor to a stable vertical alignment:
.menu a { vertical-align: top; }
  • Or move the hover background onto the parent list item so the whole cell is painted (keeps the anchor purely for text):
.menu li:hover { background-color: #581B08; }

If those don’t fully fix it, check for other hover effects (box‑shadow, outline, pseudo‑elements) and confirm you aren’t changing display on :hover. Use the inspector’s computed box model to compare the anchor and its parent across browsers; if needed, give the anchor an explicit height instead of relying solely on line-height.

Recommended Answers

All 6 Replies

Member Avatar for Member #949455

I am having a challenge with a hover state and css.

Instead of using:

display:block;

Try using:

display:inline-block;

Post the image if you can on how that looks.

I don't see any issue with your padding.

Member Avatar for ajbest

Check for other CSS related to the <a> tags in their hover state. This looks like it could be a border issue or maybe a padding issue. If there are other css styles effecting the a:hover then you will need to reverse them for this nav element in it's hover state.

Note, I would not recomend changing your display type from one nav element state to another.

Member Avatar for dwlamb

I followed the advice above of LastMitch. I am still having the same issue as depicted in the . However, only in Firefox (Kubuntu & Windows). Google Chrome (Kubuntu & Windows), Opera (Kubuntu & Windows), MSIE 8 (Windows) and Safari (Windows) all display the page as it should.

An inspection of the page in Firebug yields the following for all CSS declarations in use. It is identical to those listed in Opera or Chrome:

#navigace ul.menu li a:hover {
  background-color: #581B08;
  color: #F5F5DC;
}

#navigace ul.menu li a {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  line-height: 37px;
  padding: 0 20px;
  text-transform: uppercase;
}

#navigace li a:hover, #navigace li:hover a, #navigace li.sfHover a {
  text-decoration: none;
}

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, del, dfn, font, 
img, ins, kbd, q, s, samp, small, strike, sub, sup, 
tt, var, center, dl, dt, dd, ul, li, fieldset, form, 
label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0 none;
  font-family: inherit;
  font-style: inherit;
  margin: 0;
  outline: 0 none;
}

#navigace li {
  list-style: none outside none;
}

I have tried toggling off font-size and line-height found in #navigace ul.menu li a but to no avail. Even looking at the Box-Model under Computed in Firebug and padding-bottom does not change in regular or hover.

Edited by dwlamb because: Minor grammar
Member Avatar for Member #949455

I have tried toggling off font-size and line-height found in #navigace ul.menu li a but to no avail. Even looking at the Box-Model under Computed in Firebug and padding-bottom does not change in regular or hover.

Are you using any CSS3 code?

try to adjust your padding:

padding: 0 20px;

The reason why because I don't see anything out of ordinary your CSS code.

Member Avatar for dwlamb

Are you using any CSS3 code?

No, I am not.

Member Avatar for Member #949455

hover state menu item background

Post your nav menu code, so we can see how you put your menu in div container.

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.