Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Problem with CSS padding in Safari 3+

B

bruedc

macrumors newbie
Original poster
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;">
Click to expand...

And screenshot:
scrre.jpg


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?
 
Try adding/removing this one the text field,
Code: 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back