Member Avatar for yangyang

I have this page:

You can see how the top navigation bar with a rounded corner grey button background doesn't fit in in FF2 while in all other browsers(passed in IE6, IE7, FF3, Safari win 3, Opera 9.5 so far), it looks great.


How does one target FF2 to work around a bug? Is this a bug or any idea I can get it fixed and make it consistent in all modern browsers?

  • 4 Contributors
  • 3 Replies
  • 121 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by tomleo

Dani AI

Generated

A quick diagnosis and a practical fix that usually sorts this kind of cross‑browser nav mismatch.

, the behavior you describe (looks fine in most browsers, misaligned in FF2) is often down to the anchor not being a true block-level box or to subtle font/subpixel differences. is right that other browsers can “compensate,” and / ’s replies hint at environment differences (resolution, fonts) that change computed sizes.

Troubleshooting checklist

  • Inspect the element in FF2 (Firebug or DOM Inspector) and look at the computed box model: padding, border, height.
  • Confirm the anchor that holds the background is display:block and that its height/line-height match the background image height.
  • Check for floats vs inline-block and any whitespace between inline elements. Small font or rounding differences can shift background images by a pixel or two.

A reliable CSS pattern (adjust pixel values to your images)

#topnav { list-style:none; margin:0; padding:0; }
#topnav li { float:left; margin:0; padding:0; }
#topnav a {
  display:block;
  height:36px;        /* match background image height */
  line-height:36px;   /* vertically center the text */
  padding:0 12px;
  background-repeat:no-repeat;
}

Notes and when to target FF2

  • Prefer fixing markup/CSS rather than browser hacks; a robust block-level anchor + explicit heights usually fixes FF2 and others.
  • If you absolutely must serve a special rule to FF2, do it server-side based on user agent (fragile and not recommended).
  • Validate the HTML/CSS and test on real FF2 to confirm. Useful refs: MDN on display and the W3C CSS validator.

Recommended Answers

All 3 Replies

Member Avatar for rexibit

I am not aware of any hacks for FF2 like there are with older versions of IE. Firefox follows W3C standards for the most part, unlike IE - so hacks are very hard to come by to target it.

With that said, if it isn't showing right in FF, then you might have an issue with your compatibility and other browsers are compensating.

I did some searching and found this rounded corner that you could use that is compatible with FF2.

Member Avatar for MidiMagic

It's working for me.

Member Avatar for tomleo

Looks great in FF3, What is your screen resolution?

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.