title: JQuery Text Resizing not working with IE
body: <p>I am using the following script (that requires the cookies plugin for jquery) to allow javascript enabled users to change the font size on a medical charity website:</p>
  
  <pre><code>var sitefunctions = {
      textresize: function () {        
          var $cookie_name = "TextSize";
          var originalFontSize = $("html").css("font-size");
          // if exists load saved value, otherwise store it
          if ($.cookie($cookie_name)) {
              var $getSize = $.cookie($cookie_name);
              $("html").css({ fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px") }); // IE fix for double "pxpx" error
          } else {
              $.cookie($cookie_name, originalFontSize);
          }
          // reset link
          $(".reset").bind("click", function () {
              $("html").css({ "font-size": originalFontSize });
              $.cookie($cookie_name, originalFontSize);
          });
          // text "+" link
          $(".increase").bind("click", function () {
              var currentFontSize = $("html").css("font-size");
              var currentFontSizeNum = parseFloat(currentFontSize, 10);
              var newFontSize = currentFontSizeNum * 1.2;
              if (newFontSize, 11) {
                  $("html").css({ "font-size": newFontSize });
                  $.cookie($cookie_name, newFontSize);
              }
              return false;
          });
          $(".decrease").bind("click", function () {
              var currentFontSize = $("html").css("font-size");
              var currentFontSizeNum = parseFloat(currentFontSize, 10);
              var newFontSize = currentFontSizeNum / 1.2;
              if (newFontSize, 11) {
                  $("html").css({ "font-size": newFontSize });
                  $.cookie($cookie_name, newFontSize);
              }
              return false;
          });
      }
  }
  </code></pre>
  
  <p>You can then call it from your page like so:</p>
  
  <pre><code>       $(document).ready(function () {
              // show text resizing links
              $(".AccessibilityControls").show();
              sitefunctions.textresize();
          })
  </code></pre>
  
  <p>You can then put some links in your page like so:</p>
  
  <pre><code>&lt;div class="AccessibilityControls" style="display:none;"&gt;            
          Text Size:&lt;br /&gt;
          &lt;a class="increaseFont" style="font-size: 14pt;" title="Increase Text Size" href="#" rel="nofollow"&gt;A+&lt;/a&gt; | 
          &lt;a class="decreaseFont" style="font-size: 11pt;" title="Decrease Text Size" href="#" rel="nofollow"&gt;A-&lt;/a&gt; | 
          &lt;a class="resetFont" href="#" rel="nofollow"&gt;Reset &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So far, so good.  The above presuposes you have set a font-size in a style sheet for the html tag as follows:</p>
  
  <p>html
  {
      font-size: x-small;
  }</p>
  
  <p><strong>PROBLEM 1:</strong></p>
  
  <p>It works fine all browsers except IE.  </p>
  
  <p>WHY?!  </p>
  
  <p><strong>PROBLEM 2:</strong></p>
  
  <p>I am fine debugging in Firefox, but this is an IE problem!  Have tried attaching the process to the VS debugger, but this seems to work intermitently...</p>