IE7 shows different fonts - same CSS

I'm 99.9% finished a drupal skin, but I can't figure out a font problem I'm having.

The font is set quite high up on the DOM tree - on the body tag and maybe another wrapper, and it is supposed to be the same, (Verdana), throughout the site. However, IE7 displays a different font in the content area of article pages than it does in the content area of the main index page.

Main Index Page: http://bodybuilding.elitefitness.com (look at the 2nd article - there isn't much text in the first)
Article Page: http://bodybuilding.elitefitness.com/boosting-testosterone-levels-sustain-alpha

Here's an image of the two screenshots, taken in XP with IE7, (we have the same problem in Vista):
http://johnbeales.com/demos/ef_font_demo.png

If I check out what the fonts are supposed to be with the IE developer toolbar they both come back as Verdana. Although there is a lot of bad HTML in the pages, (there's a ton of legacy content that was imported and will be cleaned up as time goes on), both pages render in Standards mode. There are a couple of validation errors, but none of them should mess up IE that badly, and they are nearly identical on each page.

There is some javascript DOM manipulation on the page that I thought may be causing the problem, but when I turn off javascript & clear my cache it does not fix the problem.

If anyone has any idea what's going on here, I would love to know.

Thanks in advance!

John

Heehee, they're both Verdana!
What you're seeing is the effects of anti-aliasing. Microsoft developed ClearType, a method of smoothing out screen fonts. It is, by default, disabled on XP and enabled on Vista, so IE6 doesn't show it. Also, it is enabled on IE7 installations by default (can be switched off in the Tools panel.)

Something you're doing is forcing it to switch back into normal anti-aliasing mode. It's probably messing around with filters and opacity, but I can't tell from here.

That makes sense!

Even though both screenshots are taken on the same computer, if something is forcing us to go back to none-cleartype mode on the content page that would do it.

More investigation to come....

Of course, I was right. *grins*
This is responsible: <!--[if IE]>
<style type="text/css">

.article #content {

background: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/themes/BodyBuilding/images/lh_cshad_ie.png",sizingMethod="crop");

}
</style>
<![endif]-->
(lines 18-29)

Yup! That is now gone, (well, moved into the IE6-only conditional comment section).

It took me a few minutes to figure out how to get Drupal to stop caching the old template file, but now that it's been reset it works great.

Thanks so much! I was messing around with fonts for an extremely long time, and it was not a font issue at all.