CODEWITHSUNDEEP
css
Torben
Torben

Reputation: 5494

CSS - input (text and button) aligned differently in FF and Safari

i try to align a button and a text input on one level, but i get different results in Firefox (aligned properly) and Safari (not aligned properly).

I created a JSFiddle and you can see the different behavior in both browsers, but at the moment i can not say why this is happening.

Does someone know the answer?

Thanks!

JSFiddle: http://jsfiddle.net/LPgJr/2/

Upvotes: 2

Views: 1689

Answers (2)

Ray Toal
Ray Toal

Reputation: 88378

WebKit and Gecko render the heights of the text field differently, that's for sure. Try, in your fiddle, successively changing the padding of the text field. Try 0px, 1px, 2px, then 3px, 10px, 25px, 40px, 80px, anything. You can see that the padding on the text field affects the vertical position of the button. The larger the padding on the text field, the lower the button drops.

Why is this? Because the browsers are lining up the text in the text area with the text on the button.

Example here: http://jsfiddle.net/rtoal/LPgJr/6/

The browsers are giving different appearances because of the way they render text fields. Set the height explicitly, as suggested by SpaceBeers.

Upvotes: 0

SpaceBeers
SpaceBeers

Reputation: 13947

You want to float them both left - http://jsfiddle.net/LPgJr/3/

Don't forget to clear your floats afterwards.

Upvotes: 2

Related Questions