Page 1 of 1

Slightly different rendering of text in Firefox and Safari

Posted: Mon Feb 08, 2010 5:08 pm
by bare_nature
Hello,

I have noticed that in a paragraph with padding and margin set to 0, text is rendered slightly different in Firefox and Safari. To be more precise, in Firefox the text start at the very top of the paragraph, whereas in Safari there is a small space between the top of the paragraph and the text. It has nothing to do with text alignment though.

Have a look at the screenshot. The top window is Firefox and the bottom one is Safari.

Anyone have any ideas what causes this?

Image

Thanks,

Bart

Re: Slightly different rendering of text in Firefox and Safari

Posted: Mon Feb 08, 2010 5:15 pm
by Eran
There are many things that can contribute, such as line-height, vertical-align and more. I'd suggest you consider using a css-reset framework
http://meyerweb.com/eric/thoughts/2007/ ... -reloaded/

Re: Slightly different rendering of text in Firefox and Safari

Posted: Mon Feb 08, 2010 5:26 pm
by pickle
If the framework isn't effective, know that rendering engines do differ in how they render text - so it may be unavoidable.

Re: Slightly different rendering of text in Firefox and Safari

Posted: Mon Feb 08, 2010 6:32 pm
by bare_nature
I already use a reset stylesheet. Line height and vertical align don't affect this issue. It just seems that font size is also slightly larger in Firefox which leads to some irritable quirks in the layout.

I'll have to live with it it seems (or replace navigation with images instead of text ...).

Bart

Re: Slightly different rendering of text in Firefox and Safari

Posted: Mon Feb 08, 2010 6:43 pm
by Eran
Are you using a mac by any chance?

Re: Slightly different rendering of text in Firefox and Safari

Posted: Tue Feb 09, 2010 5:03 pm
by bare_nature
Yes. Could that be the cause?

Re: Slightly different rendering of text in Firefox and Safari

Posted: Tue Feb 09, 2010 5:20 pm
by Eran
It's been my experience that Mac shows inconsistent font-sizes between browsers. I don't think that's reason enough to use images instead of text though

Re: Slightly different rendering of text in Firefox and Safari

Posted: Thu Feb 18, 2010 2:28 pm
by pickle
pytrin wrote:It's been my experience that Mac shows inconsistent font-sizes between browsers. I don't think that's reason enough to use images instead of text though
Probably due to the fact that Safari on Mac would likely tie into the OS font rendering library, whereas Firefox would have to use it's own.

Re: Slightly different rendering of text in Firefox and Safari

Posted: Thu Feb 18, 2010 3:23 pm
by Eran
I would assume all browsers use the OS fonts?

Re: Slightly different rendering of text in Firefox and Safari

Posted: Thu Feb 18, 2010 5:51 pm
by pickle
pytrin wrote:I would assume all browsers use the OS fonts?
Yes, use the OS fonts, but not necessarily the same rendering code. Just look at how different text looks between IE and Firefox. I'm just guessing, but I'd imagine on OS X, Safari uses the (possibly more powerful) font rendering engine provided by the CoreXXX libraries, whereas Firefox uses the library built-in to Gecko. On Windows, Safari probably defaults to the Webkit rendering engine.

Or I could be completely wrong.

Re: Slightly different rendering of text in Firefox and Safari

Posted: Thu Feb 18, 2010 5:59 pm
by Eran
You are probably referring to font-effects, such as cleartype and other forms of anti-aliasing. I have anti-aliasing turned on at the OS level, so IE and Firefox fonts look exactly the same to me. Either way, those should not make a difference on font-size