title: Tooltip in IE position problems
body: <p>Here is some code I use for a tooltip that hovers above its element so it doesnt popup below and force the user to scroll to see it. It works fine in all browsers except IE. In IE it positions way below the element instead of above it.</p>
  
  <p>How can I fix the positioning error with IE? Im stumped.</p>
  
  <pre><code>&lt;style type="text/css"&gt; 
  .ToolTip 
  {
      border: 2px solid black;
      background:#fff;
      display:none;
      padding:10px;
      width: 325px;
  
      z-index:1000;
      -moz-border-radius:4px;
  }
  &lt;/style&gt; 
  
      &lt;script language="javascript" type="text/javascript"&gt;
          $(document).ready(function () {
  
  
      $(".tip_holder").hover(
                  function () {
                      var $containerWidth = $(this).width();
                      var $offset = $(this).offset();
  
                      $('#ToolTipPopUp')
                          .prepend('&lt;div id="tooltip" class="ToolTip"&gt;' + $("#ToolTipHolder").text() + '&lt;/div&gt;');
  
                      var $tipWidth = $('#tooltip').width();
                      var $tipHeight = $('#tooltip').height();
  
                      $('#tooltip').css({
                          'top': $offset.top - ($tipHeight + 15),
                          'left': $offset.left - ($tipWidth - $containerWidth) / 2,
                          'position': 'absolute',
                          'display': 'block'
                      });
  
                  },
                  function () {
                      $('#tooltip').remove();
                  }
              );
  
          });
  
      &lt;/script&gt;
  
  
  &lt;img src="/Content/Images/WhatsThis.png" class="tip_holder" /&gt;
                      &lt;div&gt;
                          &lt;div id="ToolTipPopUp"&gt;&lt;/div&gt;     
                          &lt;span id="ToolTipHolder" style="display:none;"&gt;For Visa, MasterCard
                              and Discover, the card verification number is a 3-digit security code that is printed
                              on the back of your card.
                              &lt;br /&gt;
                              &lt;br /&gt;
                              For American Express, the card verification number is 4-digits and appears on the
                              front of the card. The number appears on the signature strip after the last four
                              digits of your account number. 
                          &lt;/span&gt;
                      &lt;/div&gt;
  </code></pre>