timex: input-feld bei width=100% am rechten rand 4px breiter

Beitrag lesen

hallo

ich habe folgendes problem:

wenn ich innerhalb eines DIV oder einer TD ein input-feld (z.b. text) mit style="width: 100%;" versehe, zeigen der firefox, IE6 und 7 das input-feld größer an als 100%, und zwar am rechten rand um genau 4px.

wenn ich das richtig sehe, werden die 4px des linken und rechten rands des input-felds der gesamtbreite zugerechnet, also 100% + 2px rand links + 2px rand rechts = 100% +4px (box-modell).

kennt jemand eine moeglichkeit, um diese 4px auszugleichen?

hier ist der auszug aus den quelltexten:

input.frmText {
   width: 100%;
}

...
<div style="width: 300px;">
 <input type="text" name="name" value="" class="frmText" />
</div>
...

ich habe folgende moeglichkeiten per CSS versucht:

input.frmText {
 text-indent: -4px;
}

damit ist rand rechts nicht mehr abgeschnitten, dafuer aber links und dort kann ich ihn ebenso wenig ausgleichen.

alternativ ueber margin-right:

input.frmText {
 margin-right: 4px;
}

dann drueckt das input-feld den div-container bzw. die TD weiter nach rechts aussen.

und - die hoffnung stirbt zuletzt ;-) - per CSS3:

input.frmText {
 width: calc( 100% - 4px );
}

aber das ist noch zukunftsmusik.

jemand eine alternative idee?

fragt freundlich
timex