CODEWITHSUNDEEP
htmlcssformsheight
The Surrican
The Surrican

Reputation: 29866

Make form button/text field same height in all browsers?

I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)

css:

* {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    line-height: 15px;
    border: none;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
}

#search .text, #search .button {
   border: 1px solid red;
}

html:

<form method="post" id="search" action="">
    <p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>

this is how firefox renders:

nice looking

this is how chrome renders:

bad looking

i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example. in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.

Upvotes: 9

Views: 17024

Answers (7)

Vasiliy
Vasiliy

Reputation: 998

CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:

input {
    box-sizing: border-box;
    height: 15px;
}

This works for html select elements as well.

Upvotes: 0

tobart
tobart

Reputation: 1

Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.

Upvotes: 0

BarthesSimpson
BarthesSimpson

Reputation: 954

If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.

Upvotes: 0

Mikeys4u
Mikeys4u

Reputation: 1552

Usually one of these below has worked for me in the past using firefox browser.

 vertical-align: bottom;
  vertical-align: top;

Upvotes: 1

Jethro Larson
Jethro Larson

Reputation: 2335

I found this in normalize.css that solved it for me:

// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Upvotes: 11

lazycommit
lazycommit

Reputation: 414

change:

*{
    line-height: normal !important;
}

or add something like:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

don't ask why)

and. safari need special fixes. but looks well

Upvotes: 18

XMen
XMen

Reputation: 30248

Try By giving

.text{
 border:0px;   
}

Upvotes: 1

Related Questions