title: Why does absolute positionining within <button> works differently from <div>
body: <p>I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
      &lt;head&gt;
          &lt;style type='text/css'&gt;
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button style='height:100px;width:100px;position:relative;'&gt;
              &lt;span style='position:absolute;top:0;left:0;'&gt;text&lt;/span&gt;
          &lt;/button&gt;    
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>&lt;span&gt;</code> is placed relative to the vertical-<strong>middle</strong> line (with 3px padding I can't explain).  </p>
  
  <p>Replacing <code>&lt;button&gt;</code> with <code>&lt;div&gt;</code> <strong>does</strong> places <code>&lt;span&gt;</code> at the top-left corner.</p>
  
  <p><strong>Question:</strong> why does absolute positioning within button (with position:relative) behaves differently from layout using <code>&lt;div&gt;</code>? And how do I fix it?</p>
  
  <p>Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.</p>
  
  <p><strong>EDIT:</strong> <strong>IMPORTANT</strong> IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).</p>