element119
element119

Reputation: 7625

Why is Firefox cutting off the text in my <input type="text"/>?

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:

Why is this happening? Gah!

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>.

Note:

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:

http://jsfiddle.net/xxepX/

Upvotes: 17

Views: 27892

Answers (6)

Stallion Susiang
Stallion Susiang

Reputation: 1

With css you should not use padding for an input box, for indentation use text-indent instead.

Upvotes: -2

Vidhya
Vidhya

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

Filip G&#243;rny
Filip G&#243;rny

Reputation: 1769

This helped me in a similar case:

input.with-fancy-styling {
    box-sizing: content-box;
}

Upvotes: 9

random_user_name
random_user_name

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

Shailender Arora
Shailender Arora

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:-

http://jsfiddle.net/xxepX/2/

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

KodeKreachor
KodeKreachor

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

Related Questions