Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

It seems that my menu bar is displayed with a different font stretch in Firefox than it is in Chrome. See the following:

different font stretch

Here is the CSS applied to this element:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

As far as I can tell everything regarding that font is exactly the same, yet they still display differently (see pic).

Any ideas?

Thanks,

share|improve this question
1  
Have you done a CSS reset first? –  kei May 24 '11 at 20:21
    
@kei: Reset does not seem to have an effect –  Goro May 24 '11 at 21:43
    
Interesting. I'm getting the same result as your image: jsfiddle.net/YGwcn It seems to come down to how each browser interprets the style. –  kei May 24 '11 at 22:06
add comment

7 Answers 7

up vote 13 down vote accepted

Chrome uses the WebKit rendering engine. Firefox uses the Gecko engine. Both interpret and display type slightly differently, as do the DirectX and Vega graphics engines used in IE9+ and Opera.

You can't force browsers to render text identically, but you can do a couple of things to ensure that your navigation takes up the same width across browsers:

  1. Use images instead of type for your navigation bar elements. This may prove useful if your navigation area is unlikely to change often. e.g. www.apple.com

  2. Fix the width of each navigation element with CSS. The text size will still look different between browsers, but if you give each <li> element in your navigation area a fixed pixel width, the bounding box of each link will be very similar across browsers and the total width of the nav area should be the same.

share|improve this answer
4  
You to be vary careful with things like "Use images instead of type for your navigation bar elements". The images will look awful on newer machines with high resolution displays (e.g. Apple "Retina" displays, some other smart phones) unless you provide a double-resolution copy too. –  Olly Hodgson Aug 8 '12 at 11:52
    
@OllyHodgson Sure. Double-size PNGs or SVGs (which is what Apple uses in for their nav) would be best for high-res screens. –  Nick Aug 9 '12 at 10:12
    
@Nick - Yes, SVG would be the best solution. –  m93a Oct 17 '13 at 14:30
add comment

I had a similar problem and found a solution:

Using:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

In Firefox, it looks great. In Chrome, the letter spacing was strange. Removing the optimizelegibility style did the trick. Both browsers render identically now.

I decided to remove the style for webkit and leave it in place for other browsers. Looks fine now.

share|improve this answer
add comment

After testing 6 browsers/4 rendering engines on two OS. I've found most were the same even with line-spacing. I'll look into the difference with windows and Linux in a minute.

I thought the Palatino font was available everywhere but chrome fell back to times roman which is slightly smaller, the default fonts had the same results (chrome different) which mislead me for a bit.

Anyway if you specify times roman or use @fontface to supply font fileS! you may be able to make your nav bars slicker ;-)

share|improve this answer
add comment

I've found that webkit will support px for font size, but for things like letter spacing they will ignore it all together if you don't use em.

share|improve this answer
add comment

In case anyone comes across this, for me the problem was letter-spacing. Chrome and Firefox handle the property differently.

My problem was the letter-spacing was affecting the position of other elements; specifically some images in the nav menu. By removing the property my problem was instantly solved.

I have also read that specifically using .point values can have altering effects between the 2 browsers, which was true in my case.

share|improve this answer
add comment

kind of same issue stated here

you can reset your css by

http://developer.yahoo.com/yui/reset/ hope at-lest you get some clue by

share|improve this answer
add comment

Differences in font rendering between different browsers (and on different operating systems) is a fact of life. You just have to make sure that if the font displays at different widths your design can still cope.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.