Problem with CSS padding in Safari 3+

[bruedc]

Found a similar thread a while ago, but the problem was due to the OP's browser cache and not an issue with CSS. Couldn't find any other solution, so I'm hoping for some help.

I can't figure out why Safari isn't reading CSS padding properly for an input area (of a HTML form). Basically, I'm trying inline properly an input tag, but Safari is reading only the horizontal padding and not vertical.

Here's the sample markup:

<input type="text" value="yourname@xyz.com" name="EMAIL" id="mce-EMAIL" class="required email" style="border:0px;padding-top:20px;padding-right:2px;padding-bottom:0px;padding-left:7px;vertical-align: bottom;width: 223px; height: 39px;margin: none;background-image: url('background image');text-align: left;font:arial;font-size:12px;color:#D3D3D3;"><input type="submit" value="" name="subscribe" class="submit" id="mc-embedded-subscribe" style="border:0px;vertical-align:center; background-image:url('background image 2'); background-repeat:no-repeat;margin-right: 0px;padding: 3px;width:19px; height: 39px;">

And screenshot:

I've tried already expanding/changing the height and width to adjust the vertical alignment of the whole input value, plus the padding, but no dice.

Ideas?

 

[angelwatt]

Try adding/removing this one the text field,

padding: 0px 2px 0px 7px;
position: absolute; top: 20px;
vertical-align: top;
/*height: 39px;*/

It may need some other CSS, but just working from what you gave can't give a detailed solution. Safari simply has some default setting for centering the text in a text field whereas other browsers aligning it to the top.