Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Angry 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...-sustain-alpha

    Here's an image of the two screenshots, taken in XP with IE7, (we have the same problem in Vista):


    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
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • Users who have thanked Apostropartheid for this post:

    johnnyb (10-27-2008)

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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....
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Of course, I was right. *grins*
    This is responsible:
    Code:
    <!--[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)

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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.
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •