title: Please explain text-align weirdness in mobile safari
body: <p>I have a simple login form which includes a 'Cancel' button, created with the following code:</p>
  
  <pre><code>var cancelButton = document.createElement("input"); 
  cancelButton.setAttribute('type',"button");
  cancelButton.setAttribute('value',"Cancel");
  cancelButton.setAttribute("id", "user-cancel-button");
  </code></pre>
  
  <p>the css for the button is as follows:</p>
  
  <pre><code>#user-cancel-button{
    left: 3px;
    top:3px;
    text-align: center;   
    position: absolute;
  </code></pre>
  
  <p>}</p>
  
  <p>In every desktop browser it looks fine, however, in Mobile safari the 'Cancel' text is always aligned to the right (even if I set text-align: left).</p>
  
  <p>If, on the other hand, I add some padding to the button (padding: 1px) it renders as it should in mobile safari.  Can anyone explain what's going on?</p>