I have a form on the following page:
http://bit.ly/IqsngY

and I am trying to set the width / padding of the form fields in % like so:

form-01, .form-02 {
    overflow: hidden;
    width: 50%;
    margin: 1.42857142857143em; /* 20px / 14px */
}

.form-02 p {
    width: 100%;
}

.form-01 input, .form-01 textarea, .form-01 select,
.form-02 input, .form-02 textarea, .form-02 select {
    width: 90%;
    padding: 0.35714285714286em 5%; /* 5px / 14px, 10px / 14px */
    background: #d4d4d4;
    border: none;
}

Yet I find the % padding is just completely ignored, am I doing something wrong?

There is padding when I look at it. Using Chrome. In fact, if I look at the actual computed metrics in Chrome, there is an 5px (0.35714285714286em) padding at the top and bottom, and a 18px (5%) padding to the left and right.

I checked with Opera, Firefox, Chrome and IE9.
All browsers display padding you set.

Hmmm that's bizarre, I'm guessing the problem must just be with FF for Mac then! Are you both testing on Windows by any chance?

Yeah im on windows

Originally Posted by pealo86

Hmmm that's bizarre, I'm guessing the problem must just be with FF for Mac then! Are you both testing on Windows by any chance?

Yes, I was on Windows. I just tested it on my mac aswell and there is indeed no padding on Firefox. Works normally on Chrome and Safari, though.