clubmate.fi

Firefox wont take percentage padding on form elements

Irritating little bug. But, there is a fix as always.

ℹ️ I think this bug has been fixed, so this article is a bit useless.

It's an ugly fix tho. But it's cause of a bug, so it's okay. Right?

Why don't just use px or em since they work just fine? Cause of a fluid width layout.

text-indent to rescue

text-indent:x%; works for the left and right and the top you could define with px. But, it wont work in ie6 and ie7, luckily those you can target separately. But, it doesn't seem to be working at all in Safari. And, in Chrome, when you move focus to the field the cursor ignores the text-indent until you start typing (check the fiddle below). Not the biggest flaw but irritating still.

/*This could work, but doesn't*/
input,
textarea {
  text-indent: 2%;
}
.ie6 input,
.ie7 input,
.ie6 textarea,
.ie7 textarea {
  padding: 2%;
}

This fiddle will illustrate better.

The fix

Loads of inconsistencies and hassle. Why not simply target only Firefox and solve this issue without headaches.

@-moz-document url-prefix() {
  /*Top magrin defined in px*/
  input,
  textarea {
    padding: 15px 0;
    text-indent: 2%;
  }
  /*New width, since it's narrower without padding*/
  textarea {
    width: 99% !important;
  }
}

Here's an article on targeting browsers.