Reputation: 7625
I have a simple <input type="text"/>
styled with the following:
font-size:1.5em;line-height:1.5em;padding:.6em .4em;
It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).
However, we arrive at Firefox, and this happens:
As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>
.
It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.
Here's a JSFiddle, with the exact problem I'm describing:
Upvotes: 17
Views: 27892
Reputation: 1
With css you should not use padding
for an input box, for indentation use text-indent
instead.
Upvotes: -2
Reputation: 507
I too tried the technique of increasing 'line-height'. But it makes the text too long in height. Replacing 'line-height' with 'height' solved my issue in FF and chrome, without making it too long in height.
Upvotes: 0
Reputation: 1769
This helped me in a similar case:
input.with-fancy-styling {
box-sizing: content-box;
}
Upvotes: 9
Reputation: 26160
I had this problem also, and wanted to share my fix.
First, be sure you have the proper doctype declaration, like so:
<!DOCTYPE html>
<html lang="en">
Even with that, I was getting minor trimming of the lower-case j, g, and y.
I inspected and found this style on the .form-control
class:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box
box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
Upvotes: 2
Reputation: 7778
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
or see the live demo:-
UPDATED
please check your updated css i have added line-height & height in your css and removed the padding.
.huge-form input, .huge-form button{
font-size:1.5em;padding:0;
line-height:31px;
height:31px;
}
or you can see the live demo:- http://jsfiddle.net/xxepX/5/
Upvotes: 1
Reputation: 8882
Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.
Upvotes: 16