title: jQuery slideDown causes wrapper div to shift in firefox
body: <p>I have a div inside a containing div (i.e. a "wrapper" div).  This wrapper div has its margins set to auto so it's centered on the page.  When you click a button, another div inside the wrapper div is displayed using jQuery's slideDown function.  However, when this happens, the wrapper div shifts a couple of pixels to the left, and shifts back when you click the button again to get the div to disappear via jQuery's slide up function.  Here is my code, div.answer is the div inside the wrapper div that you show/hide by clicking the button</p>
  
  <p>CSS:</p>
  
  <pre><code>    #wrapper {
          background: url(myimages/bground.jpg);
          text-align: center;
          margin: auto;
          width:1020px;
          border:0px solid red;
      }
  
      div.answer{
          border: 0px solid #5c5c5c;
          padding:3px;
          margin-left: 29px;
          margin-right: 29px;
          display:none;
      }  
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>    $('span.problemBullet').toggle(function(){
          $('div.answer').slideDown();
          $(this).html('&amp;nbsp;-&amp;nbsp;');
          $(this).css('padding','0px 2px 0px 2px');
  
      },
          function(){
              $('div.answer').slideUp();
              $(this).html('&amp;nbsp;+&amp;nbsp;');
              $(this).css('padding', '0px 0px 0px 0px');
  
          }
  
      );
  </code></pre>
  
  <p>"problemBullet" is a little button I created from a <code>span</code> element have that you click to get the div to show and hide</p>
  
  <p>This works fine in Google Chrome and Safari.</p>
  
  <p>You can see it in action here:
  <a href="http://www.sarahluo.com/mathProblems.php?subTopicId=1&amp;subTopicName=Representation_of_Numbers_in_the_Computer" rel="nofollow">Click me</a></p>