CSS width=100% in Firefox; Text-indent in IE

I've been doing cross-browser CSS styling for work, and what a PITA that has been. My most recent discovery is that Firefox conveniently adds the padding to elements after sizing them to 100% of the parent. So let's say you want a form text field that is as wide as the parent div. You set style="width:100%". But now the text abuts the left edge of the text entry box. So you add a left pad: style="width:100%;padding-left:4px". Now the text looks great, but WTF?! the right edge is no longer aligned with the parent DIV. In fact is extends by 4px. It'd be nice if this worked: style="width:100% - 4px;padding-left:4px", but of course it doesn't.

So you have the brilliant idea of using text-indent instead. After all, that's what this property was intended to handle. style="width:100%;text-indent:4px". Perfect. Looks great. Except on IE where for some logic-defying reason, the browser actually indents the entire text field rather than just the text inside the field. WTF?! Who are these people who implement the CSS standards and where do I sign up to beat them with an improvised bolo made from an old 56k modem & phone cord.

Thankfully someone intelligent on the IE team realized that their rendering engine was so broken, that web developers might need to write IE-specific code to handle it without making the display look like a bad interpretation of Picasso's home page. So now I've added the following to my web page:

  <!--[if IE]>
    <style type="text/css">
      INPUT .textfield {
        padding-left:4px;
        text-indent:0; }
    </style>
  <![endif]-->

And that's when I took up heavy drinking to dull the pain...

Comments

[Dave]

this had absolutely nothing to do with the problem i was trying to resolve but was good for a laugh (it's funny 'cause it's true)!!!!

[Motaz Abuthiab]

This works fine with input type=text but not with textarea
when using textarea and have a second line.. then the text-indent is not nice at all :(