clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Firefox wont take percentage padding on form elements

Filed under: HTML/CSS— Tagged with: input, textarea

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.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!