1 comment

1. Cause of Problem

   It appears that the misalignment of the quotation marks is due to your h3 elements being replaced by the cufon-yui.js script by canvas elements, because when I disable JavaScript on your site, I notice that the quotation marks are then properly aligned (so it has nothing to do with your CSS).

   Additional Problem: IE9 Incompatibility

   I’ve also found through my research on cufon for another SO problem that it sometimes does not work in IE9, which I have confirmed is the case for your site. Depending on which version of IE9 you’re using, the h3 and other header elements on your site won’t show up at all.

   Possible Solutions

   Fix 1. Upgrade Cufon

   According to Cufon’s FAQ, item #8, the IE9 incompatability issue was fixed in a newer version of their code (which you might not be using), and it’s available for download from their main site:

   This was fixed in 1.09i. Just download
   a new cufon-yui.js from the official
   site and you’re good to go. It’s fully
   backwards-compatible too.

   Upgrading to the newer solution of Cufon might solve your quotation mark misalignment issue too, but I’m not sure.

   Fix 2. Use IE Conditional Comments

   According to the same Cufon FAQ, if you don’t want to upgrade your Cufon version, you can place the following code in your html before the calls to Cufon.replace():

   <!--[if gte IE 9]>
       <script type="text/javascript">
           Cufon.set('engine', 'canvas');
       </script>
   <![endif]-->
   

   As an alternative, they also give instructions on how to force IE9 to behave like IE7 or 8.

   These solutions should fix the IE9 incompatibility problem, but I’m not sure if they’ll fix the quotation mark misalignment issue.

   Fix 3. Use Typekit Instead

   You may also be interested in trying Typekit instead, which according to the cufon main site, also has the advantage of the text being selectable, which it currently isn’t using Cufon:

   You might also want to take this
   opportunity to [try Typekit][1], a hosted,
   @font-face-based alternative. Yes,
   that means they support text
   selection. It’s the easiest way to
   embrace standards.

   Using Typekit will definitely solve the problem of your header elements not showing up in IE 9, and might solve the quotation mark misalignment issue too.

   Fix 4. Remove Special Fonts Entirely

   You also always have the option of just not using one of these JavaScript-injected special fonts at all.

   Log in to Reply