I've had this trouble a couple times and never been able to figure it out. I've got a background image on an input tag for the submit button. The alignment looks fine in Firefox, but is a few pixels lower in Safari.

Screenshots:

Firefox - http://screencast.com/t/Y2M2ZDQ2MW

Safari - http://screencast.com/t/NDJkMjcxZT

My HTML:

<form accept-charset="utf-8" method="get" id="newletterForm" action="">
    <input type="text" autocomplete="off" id="email" name="email">
<input type="submit" value="" id="btn">
</form>

And my CSS:

form {display: inline;}

#email {width: 175px;}

#btn {
background: url('/wp-content/themes/salume/img/send.png') no-repeat;
width: 23px;
height: 22px;
cursor: pointer;
border: none;
margin: 7px 0 0 5px;
vertical-align: text-top;
}

Can anyone shed some light on issue for me? Thanks.

1 answer

0
points

I just needed to float them, right? Sometimes I feel pretty dense.

Answered over 6 years ago by Axel Anderson