CODEWITHSUNDEEP
inputpaddingfont-sizecss
Matthew
Matthew

Reputation: 2246

Possible input padding bug in Firefox

I have three main elements on my page. Two spans and an input field.

All three elements have the same padding and font-size, but the input field is taller than the two spans by one pixel (in Firefox). It looks perfectly fine in Chrome.

This "bug" may be because I'mm using Google Web Fonts, but I want to know what you guys think the issue is.

Here's the fiddle Open it in Chrome and Firefox and compare!

I've tried:

vertical-align: top; (middle, and bottom)
max-height: 50px;
line-height:;
overflow: hidden;

I also tried to change the font-size on the input field, it then fixes the problem in Firefox, then the problem occurs in Chrome... it never ends!

Upvotes: 3

Views: 3991

Answers (4)

Lightningsoul
Lightningsoul

Reputation: 552

There was a change with the most recent Firefox version. It now uses the same padding as the Internet Explorer 11. I guess it was a bug and got fixed now. But I can't find the bugfix in the changelog.

But the behaviour definitely changed from having no left and right padding in Firefox 26 (the last version I had before updating) and having a default 1px on both sides in Firefox 29 (like it is in IE11).

Could someone point out the link to some changelog for this? Thank you!

Upvotes: 0

Matthew
Matthew

Reputation: 2246

.enter-price {
    max-height: 50px;
}

Needed to force the amount of height allowed. Problem solved.

Upvotes: 2

Dom Day
Dom Day

Reputation: 2562

Perhaps you should use a fixed height on the element, rather than relying on padding and font size to calculate the height: http://jsfiddle.net/sN7aH/

#amount {
    font-size: 18px;
    background-color: #fcfcfd;
    font-family:'Montserrat', sans-serif;
    color: #bbc2cb;
    float: left;
    width: 312px;
    height: 50px;
}

I see no differences here using that on ff and chrome

Upvotes: 4

Cody O'Dell
Cody O'Dell

Reputation: 181

Use your inspector to see what default styles each browser is applying to the element. Then you can restyle accordingly.

Upvotes: 0

Related Questions