CODEWITHSUNDEEP
htmlcssfirefox
LoveAndHappiness
LoveAndHappiness

Reputation: 10135

HTML Input Fields not working in Firefox

My Login-Form doesn't work on FIREFOX. You just can't write inside the fields (or at least it appears like that).

In Chrome everything works fine and also in IE, as far as IE allows it.

Here is my fiddle: http://jsfiddle.net/W39EA/6/

I already debugged it and found that the lines, which are causing the error in Firefox are these:

  .access .form-control {
     padding: 21px 15px;
     margin: 10px 0px; 
  }

They are at the very bottom of the Fiddle.

If I remove them, Firefox works again. But I actually need them to add the necessary padding to my Input-Fields.

Has anyone a suggestion for solving this problem?

Upvotes: 2

Views: 3873

Answers (2)

Nick R
Nick R

Reputation: 7784

It's because you have so much padding on the input fields. You could just set the height of the input field, and then only add a bit of top and bottom padding. -

The purple area is the padding

If you change the input CSS to:

.access .form-control {
    padding: 5px 15px;
    margin: 10px 0px; 
    height:40px;
}

That should fix the problem - jsfiddle.net/W39EA/7

Upvotes: 3

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

I think this problem came beacuse Firefox uses box-sizing property for input is different from the Chrome and IE.

So that I have added "box-sizing:content-box" in your css. After that I got the same kind of results in both the browsers. You can reduce the padding size based on your requirement now.

.access .form-control {
padding: 10px 7px;
margin: 10px 0px; 
-moz-box-sizing:content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

Upvotes: 1

Related Questions