Padding Left quirk in Firefox

Question

http://jsfiddle.net/hERrX/

input{
    padding:1%;
}
input#checking{
    padding-left:40px;
}

Please Check the above link in FIREFOX and help me with the problem. It seems to work quite well in Chrome. The padding-left doesn't seem to work even though it has higher priority.

Answer 1

It works if you don't use a % length:

http://jsfiddle.net/hERrX/15/

input{
    padding: 5px;
}
input#checking{
    padding-left: 40px
}

I don't know why it doesn't work with %..

I found an existing bug report here: https://bugzilla.mozilla.org/show_bug.cgi?id=527459

Answer 2

This looks similar to question #1446832, Firefox seems to not work too well with percentage paddings.

The generic padding: 1% is conflicting with the specific left-padding padding-left: 40px. In jsfiddle.net I fixed it by replacing the latter with padding: 0 0 0 40px.