Question

I currently have a simple form with a text input that has a blue background set by css. It all works perfectly and looks good in firefox and ie but not on an iPhone or safari? How can I arrange it so that there is an image behind the input rather than a background?
Please note, there are other images either end of the input, see – http://stack.uk.to

Answer 1

The only issue I see is that the CSS for your input says its height should be 48px. Your images that sit next to it are 50px in height. If you change the input‘s height to 50px it seems to match.

style.css:

.loginInput {
    margin-right: -11px;
    background: #0099FF;
    padding: 0;
    color: #000066;
    font-size: 36px;
    font-family: 'Cubano', Arial, sans-serif;
    vertical-align: bottom;
    height: 50px; 
    border: none;
}