input-feld bei width=100% am rechten rand 4px breiter
timex
- css
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
kennt jemand eine moeglichkeit, um diese 4px auszugleichen?
Bitte gleiche nicht die 4px aus. Dass der Rahmen jetzt 2 Pixel breit ist, ist kein festgelegter Wert. Unter anderen Betriebssystem / Skins kann der auch 3px oder 1px breit sein. Oder 20.
und - die hoffnung stirbt zuletzt ;-) - per CSS3:
Wenn schon CSS 3, dann halte ich box-sizing für sinnvoller. Aber das kann auch noch nicht jeder Browser. http://aktuell.de.selfhtml.org/weblog/css3-calc-vs-box-sizing
Bitte gleiche nicht die 4px aus. Dass der Rahmen jetzt 2 Pixel breit ist, ist kein festgelegter Wert. Unter anderen Betriebssystem / Skins kann der auch 3px oder 1px breit sein. Oder 20.
du hast vollkommen recht! danke fuer diesen hinweis, das werde ich entsprechend beruecksichtigen.
Wenn schon CSS 3, dann halte ich box-sizing für sinnvoller. Aber das kann auch noch nicht jeder Browser.
auch hier danke fuer den hinweis, damit habe ich schon einmal den firefox unter kontrolle gebracht. fuer den IE sehe ich keine alternativen, oder?
gruesse
timex