IE7 and 8 smaller font-size issues with SIFR

Question

Howdy,

my website http://tweetMP.org.au uses SIFR to render the flash font h2 headings.

If you compare the site between Firefox and IE7/8 you'll notice the headings are noticably smaller in IE (7 and 8 only - IE6 looks fine).

Adjusting the font-size on my ie(7 and 8 specific css) does nothing.

Any ideas why this is the case?

-V

Answer 1

I would recommend setting the font size within the sifr config file, something similar to this: (make note of the font-size element). This insures that the font size is carried out within the sifr and might help you out. if it doesn't let me know there's one more solution i can think of :)

sIFR.replace({
selector: '.din-20-bold',
src: 'fonts/din.swf',
highsrc: 'fonts/din.swf',
css: {
'.sIFR-root' : { 'text-transform': 'uppercase' , 'color':'#FFFFFF', 'text-align':'right', 'width':'484px', 'font-size':'20px', 'font-weight':'bold'},
},
wmode: 'transparent',
paddingTop: 0
});

Answer 2

Your problem might be from using pixels (px) for the font size. Although ems (em) are the modern way to size fonts, percentages (%) display more consistently across browsers. Try that, and test the sIFR again. For more info, read the articles below, one of which (on A List Apart) quotes:

A fix to the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage

CSS Font-Size: em vs. px vs. pt vs. percent

How to Size Text in CSS