title: jQuery Show/Hide - CSS display values are affecting my layout
body: <p>jQuery uses the CSS <code>display</code> property under the hood of the simple <code>show()</code> and <code>hide()</code> functions. The following HTML includes three buttons, each wrapped in a <code>&lt;span&gt;</code> tag, and all three <code>&lt;span&gt;</code> tags are placed in a parent <code>&lt;div&gt;</code> container. On page load, the <code>&lt;span&gt;</code> tags are hidden using jQuery <code>hide()</code>, and, at some point later on, they are displayed using the <code>show()</code> function. The HTML is now in the following state with the <code>&lt;span&gt;</code> tag having received the style value <code>display: block;</code>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style="text-align:right; width:100%;"&gt;
      &lt;span style="display:block"&gt;
          &lt;input type="button" value="Button1" /&gt;
      &lt;/span&gt;
      &lt;span style="display:block"&gt;
          &lt;input type="button" value="Button2" /&gt;
      &lt;/span&gt;
      &lt;span style="display:block"&gt;
          &lt;input type="button" value="Button3" /&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In Firefox (3.5) the span elements appear stacked vertically on top of each other, whereas in IE they appear inline. I would have expected the latter in both browsers because I thought that the default layout for span tags was inline.</p>
  
  <p>If I manually change the style from <code>display:block</code> to <code>display: inline;</code>, it looks correct in Firefox. Essentially, when showing an element, jQuery is using a value for <code>display</code> that is not always valid. Adding <code>display: block</code>; is enough to show the element, but not enough to show it with the inline layout I require.</p>
  
  <p>So, to my questions:</p>
  
  <ol>
  <li>Is this a known issue with jQuery? I am using jQuery 1.2.6.</li>
  <li>Has anyone experienced this problem before, and how did you get around it?</li>
  </ol>