Urgent: Font rendering differently in Firefox and IE

Hi,

The font on my blog pages is rendering differently in Firefox and IE.

Please have a look at the following page:
http://brains.intheorbit.com/2008/09/digital-age-and-handwriting.html

The font comes up perfectly in Firefox but gets enlarged in Internet Explorer.

Could someone please provide a solution to this anomaly ASAP.

Here's the CSS code for the page content:

.content p {
font-size: 12px;
line-height: 1.5em;
margin: 0px 0px 10px 0px;
padding: 0;
}

.content .more-link {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: block;
}

.content h1 {
letter-spacing: -2px;
font-size: 20px;
color: #97aab1;
}

.content h2 {
letter-spacing: -1px;
font-size: 18px;
color: #1394ef;
}

.content h3 {
letter-spacing: -1px;
font-size: 16px;
font-weight: bold;
color: #333;
}

.content h4 {
font-size: 14px;
font-weight: bold;
}

.content h5 {
font-size: 12px;
font-weight: bold;
color: #999;
}

.content h6 {
font-size: 11px;
font-weight: bold;
}

 

Link is broken.

gary

 

Yup I'm getting the same error.

 

You have to use font-family in your CSS.

font-family: and then the family

Hope it helps

 

Your fonts should be coming up the same size because you are using px, unless you are testing in IE7 and have changed the zoom.

One thing that might render different though is the line-heights, with FF making them significantly larger since you are declaring them in EM/%. Gecko rounds fractions up while at the same time keeping a floating point tally of all line-heights, making line-heights in gecko based browsers like FF a complete train-wreck.

Of course, if any of what you are targeting is actually page content - like the body paragraphs - as evidenced by the .content class - they should NOT be made using px fonts since they do not obey the system metric. You should in fact be using %/em or at the very least pt for those areas so large font users aren't diving for the zoom control when they land on your page... especially with 12px being at the bottom end of usability minimums, anything below that effectively being illegible for large font/120dpi users.

 

brains.intheorbit.com returns a 404 error code. Did you delete this subdomain because the font on your site was not properly being displayed?

 

Check if you have 'Large' text size in IE.

In IE View > Text Size

Set to medium and check.