3

I have a simple login form which includes a 'Cancel' button, created with the following code:

var cancelButton = document.createElement("input"); 
cancelButton.setAttribute('type',"button");
cancelButton.setAttribute('value',"Cancel");
cancelButton.setAttribute("id", "user-cancel-button");

the css for the button is as follows:

#user-cancel-button{
  left: 3px;
  top:3px;
  text-align: center;   
  position: absolute;

}

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).

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?

Simple Simon
  • 712
  • 2
  • 8
  • 23
  • I'm having the exact same problem. Unfortunately for me adding padding does not fix the issue. I'm only have this problem in Mobile Safari 4.0.5 and under (iPhone 4/4.1 and below) – norsewulf May 07 '14 at 19:43
  • I am unable to reproduce this (jsfiddle: http://jsfiddle.net/B3V4x/) on my iPad 3 but: text-align might only align the value inside the button. It looks like left: 3px; isn't being honored. Have you tried with a right value (auto or something large)? – goldins May 07 '14 at 21:43

1 Answers1

0

try doing this:

<button id="user-cancel-button"><div align="center">cancel</div><button>

This should solve the problem with the mobile safari.

Kash Pourdeilami
  • 488
  • 2
  • 6
  • 24