Member Avatar for peepster

Hi, I am designing a website and it looks PERFECT in firefox for the mac. I had to do CSS hacks so that it would also work in IE5-8. But when I look at the page in Firefox for Windows, the fonts are a "little" off especially, the last button (ASA Home) on my navigation bar--when you roll over it, the whole button turns gray but on the Firefox for Windows there is still a dark green "gap" on the right of the rollovers. I was able to fix this rollover issue along with some other issues by doing a separate css stylesheet for IE, but is there a way I can do a similar css stylesheet for Firefox for Windows?

www.asanet.org/footnotes

  • 3 Contributors
  • 3 Replies
  • 123 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Browsers on different OSes render fonts and fractional pixels differently, so what looks perfect in Firefox on macOS can show a tiny gap in Firefox on Windows. described a narrow green strip showing through on the last nav rollover — that almost always comes from one of three things: the anchor not occupying the full list-item area (display/box-sizing differences), fractional-pixel rounding when widths are calculated, or subtle font-metric/rendering differences that change text width and push layout a hair out of alignment. ’s sizing tweak and ’s note about using relative units point toward layout sizing being the real issue rather than a browser “bug.”

Quick checklist to diagnose and fix

  • Inspect the computed widths for the li and its a in Windows Firefox (DevTools). Look for fractional pixels or a difference between the two elements.
  • Make the link fill the item (so hover covers everything): use display:block on the anchor and box-sizing:border-box so padding doesn’t change the outer width.
  • Remove inline-block whitespace or use floats/flex so inter-item gaps aren’t introduced by HTML spacing.
  • Try overflow:hidden on the anchor or li as a last-resort visual mask for tiny subpixel gaps.

Practical snippets (apply and test on both platforms)

/* layout so anchors fully fill buttons */
#menu li { float: left; list-style: none; }
#menu li a { display: block; padding: 0 12px; box-sizing: border-box; }

If a platform-specific tweak is still needed, add a class via JS when running Firefox on Windows and write a small override:

if (/Win/.test(navigator.platform) && /Firefox/.test(navigator.userAgent)) {
  document.documentElement.className += ' ff-win';
}
/* then in CSS: .ff-win #menu li a { padding-right: 13px; } */

You can also target Firefox-only rules with @-moz-document (affects Firefox on any OS).

Cautions and final advice
User-agent sniffing is brittle — prefer fixing the layout so it’s resilient across rendering differences. Normalizing fonts and using box-sizing: border-box plus block-level anchors usually removes the gap without hacks. If you still need per-browser rules, use the JS-class approach so the core layout remains cross-platform.

Recommended Answers

All 3 Replies

Member Avatar for peter_budo

The size of menu been declared as 75opx. Unfortunately after adding all elements of your list there is still little empty space left at the end. Just change value in #menu a.last of padding-right from 21px to 30px and it should be solved (at least it worked for me when I tried).
If this doesn't work let me know

Member Avatar for peepster

When I do that, it "pushes" the last Nav "ASA Home" onto another line. The rollover works fine in Firefox for Mac but on the Windows the gray rollover on the last one dosen't completely cover up the green...

Member Avatar for MidiMagic

Stop using pixels!!!!

Pixels for sizes make pages incompatible with different screen resolutions.

Define all sizes with ems (for text) or percent (for screen layout).

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.