Inputfield with width 100% "reaches" into padding

Question

i have a Tablecell with an Inputfield in it. The Inputfield should fill up the Tablecell but not reach into its padding. What i have looks like this (with firebug):

I want the inputfield to be kept inside the blue area and not raching into the purple one.

And: Of course i read all the questions here on this topic first. I read all of it and i could not find any answer which actually solved that.

It should work in all modern browsers (ie7 as well);

I made a minimal live Example with jsfiddle where i tried all the solutions in the other questions but i just could not get this to work. a) Is there a working solution for this? and b) Is there even a nice and non-workaroundish solution for this?

Why is this a problem in all browsers? I think this is a wrong specification in CSS. Because if i say "100%" of course i want the element to fit "100%" of the CONTENT Area. What is the use case for letting it flow into paddings and margins?

Answer 1

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>