Verdana differences in Firefox Mac vs Windows

[alexcroox]

I have noticed using Verdana seems to have a big difference in display on Macs (what I am developing on) and Windows. Obviously there is a big difference in the way Macs display fonts, but is there a way around this as Verdana seems to display so different in Windows Firefox that it pushes my navigation off the side. This is a major problem as I cannot create style sheets based on OS!

You can see the problem here (if you are using windows you will see the problem).

<snip>

Any suggestions, apart from changing the font family of course :P

[edited by: swa66 at 6:39 pm (utc) on July 2, 2009]
[edit reason] No personal URLs allowed please see forum charter and ToS [/edit]

[rocknbil]

Welcome aboard alexcroox, first, see TOS #13 [webmasterworld.com]

Additionally, at my resolution and settings, in FF the nav is running on two lines (XP SP2, FireFox, 800 X 600)

The only solid way to get control over this is to make your nav buttons images. You're experiencing only two environments, there are thousands of possible combinations that can break your layout.

Also you might make sure the page validates [validator.w3.org].

[alexcroox]

Am I not allowed to post a link to my problem in this forum then? I'm not promoting anything just need a little help :s

So you think I should stick to images then? Not great for SEO/accessibility purposes which is why I went down the text route but if that is my only solution...

The page passes validation.

[rocknbil]

Generally they would rather you post sample code of the problem so that everyone can examine it in a common page that doesn't change (ex.: you ask a Q, someone makes a suggestion, you make changes, now later visitors are looking at a different version, the original problem has changed . . . )

Not great for SEO/accessibility purposes

You can use alt attributes to replace the text value of the links.

[alexcroox]

[webmasterworld.com...]

[swa66]

I always had the impression (but never the patience to fully dig into it) that font resizing on windows is in relative big increments vs. a mac doing it for any value you throw at it.

[rocknbil]

Per the link you posted - yes, text links are better, but you have to "Choose your battles." You can

- provide redundant plain text links at the foot, with the header links in images
- Stick with textual links, re-think the navigation, possibly eliminating 1 or 2 links to account for variations in OS/browser/user settings
- create a wider container so it doesn't blow up the design
- Also re-think the navigation, make the text smaller *or* do a browser ID and output alternate style sheets (not recommended, it can break)

There really are no set rules, and I doubt any single decision here will make or break your site's success.