Font sizes are not unified across browser, how can I force them to be?

[zRonin]

<div style="background-image: url('bg.png'); background-repeat: repeat-y; background-position: center">
<a href="#">
<a href="#">
<a href="#">
<a href="#">
</div>

I'm using the above type of structure for one of my navigation panels. I specify the font size as 9px and my background is designed to alternate colors every 20 px. With the padding, I get a good alternation without programming it into the PHP.

This works on the latest FireFox and Safari 3 for Windows. It even seems to work OK in IE 6 (though I can't tell exactly because the layout still isn't working correctly in that browser).

Other browsers such as Safari 1/2 seem to have a different interpretation of 9px for the font size. How can I force them to be the same?

[tedster]

The common generic fonts -- the ones that we are forced to use on the web -- come in myriad versions, all slightly different yet given the same name. Browsers often install with their own version of a common font, one that is slightly off from others but still called by the same name.

The web was not created to allow pixel perfect matching layouts across user agents. That said, make sure you explicitly declare all the relevant margins and padding in px (rather than letting the browser default to kick in) and you might yet get your specific idea to work on various desktops and notebook systems. But don't even think of looking at it on a mobile phone or PDA screen.

[Robin_reala]

Why not do something like this?

<ul id="nav">
<li class="odd"><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="odd"><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

and for the CSS:

#nav li { background-color: red; }
#nav li.odd { background-color: green; }

That way you're not constricted to a particular font size.

[edited by: Robin_reala at 11:35 am (utc) on June 16, 2007]

[vincevincevince]

I'd fix the height of the <A HREF explicitly:

CSS:

<style>
a {display:block;height:20px;margin:0;padding:0}
</style>

[zRonin]

Fixing the height works pefectly!

As to why I didn't want to alternate classes: I'd prefer to have my php generate the navigation without worrying about alternating it. Yes, it only requires an extra 3 lines of HTML and 4 lines of PHP, but I prefer to use the 'cleanest' method possible.

[Matt Probert]

I'd suggest not trying. You can never guarantee uniformity across all client systems, and HTML is not designed to be. Instead, aim for simplicity which will 'work' across all environments, rather than appear identical, it will save you stress and make for a cleaner page.

Matt

[penders]

As to why I didn't want to alternate classes: I'd prefer to have my php generate the navigation without worrying about alternating it.

Let JavaScript apply the alternating classes once the page has loaded. If JS isn't enabled... well, it's only a visual enhancement.