Merkwürdiges Verhalten bei CSS-Formatierung von <input>

[Volker]

Hallo,

in meiner CSS liegt eine Formatierung für <input> vor:

input {
    text-align: left;
    background-color: white;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: Black;
}

input.submit, input.function {
    background-image: url('../graphics/bg_button.gif');
    background-color: #e6e6e6;
    padding: 0px 12px 0px 12px;
    margin: 3px 0px 0px 0px;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-bottom: 1px solid #444444;
    border-right: 1px solid #444444;
    width: 80px;
    height: 18px;
    font-weight: bold;
    text-align: center;
}

In der HTML-Datei heißt es nun:

<input type="submit" value="send" class="submit">
<input type="reset" value="reset" class="submit">
<input type="button" value="print" class="function">
<input value="test" class="submit">

Dabei sehen am Ende im Broser die Button allesamt anders aus!

Kurioserweise zeigt "Firebug" für alle vier Button die absolut identischen Formatierungen an. Noch kurioser: Schalte ich in "Firebug" die Höhenangabe "height:18px" temporär aus, vergrößert sich der Button auf den gewünschten Wert von 18 Pixeln, schalte ich die Höhenangabe wieder ein, verkleinert sich der Button auf 15 Pixel.... Bin ich blöd, ist mein Browser doof oder dreht sich die Sonne nun wieder um die Erde???

Interssanterweise verändert sich die Darstellung der Button jedes Mal, wenn ich die Typ-Angabe ändere, die Klassen-Angabe jedoch belasse. Verstehe ich irgendeine CSS-Grundregel gerade nicht?

Hilfe!!!!! (und Danke für jeden Lösungsansatz...)

[Kalle_B]

Hallo,

die "verdächtigen" Eigenschaften wie padding, border, margin hast du berücksichtigt. Kann der text innerhalb des input, je nach type noch verschiedene line-height und margin haben?

Irgendwie funken da Grundeinstellungen des Browser dazwischen.

Bei iframe hatte ich so einen Fall. Die style-Angabe border:none wurde vom IE6 ignoriert, der wollte html frameborder=0 haben.

Hatte nicht gewusst, dass es "frameborder" gibt.

Kalle

[Gunnar Bittersmann]

@@Volker:

nuqneH

<input type="submit" value="send" class="submit">
<input type="reset" value="reset" class="submit">
<input type="button" value="print" class="function">
<input value="test" class="submit">

Dabei sehen am Ende im Broser die Button allesamt anders aus!

Bei mir sehen die drei(!) Buttons gleich aus.* Das letzte 'input'-Element ist kein Button.

Wozu sollen die Klassen gut sein? Attributselektoren kennst du? [CSS2 §5.8, http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte@title=SELFHTML]

Qapla'

*von der Beschriftung natürlich abgesehen (hier sollen ja Korinthenkaccker unterwegs sein *VBG*)

[suit]

*von der Beschriftung natürlich abgesehen (hier sollen ja Korinthenkaccker unterwegs sein *VBG*)

Weil du hier gerade mit Fäkalwörtern herumwirfst: immerhin wischt du dir schon alleine den Hintern ab.

[Gunnar Bittersmann]

@@suit:

nuqneH

Weil du hier gerade mit Fäkalwörtern herumwirfst: immerhin wischt du dir schon alleine den Hintern ab.

Genau das wollte ich hören!!!11einself

Ich nehm das mal als Kompliment.

Hier schlagen ja einige auf mit der Bitte, man möge ihnen den Hintern abwischen. Und wenn man dies dann tut, sind sie beleidigt, dass man sie wie kleine Kinder behandelt …

Qapla'

[suit]

Genau das wollte ich hören!!!11einself

Ich nehm das mal als Kompliment.

So war das gedacht ;)

[Cheatah]

Hi,

Kurioserweise zeigt "Firebug" für alle vier Button die absolut identischen Formatierungen an. Noch kurioser: Schalte ich in "Firebug" die Höhenangabe "height:18px" temporär aus, vergrößert sich der Button auf den gewünschten Wert von 18 Pixeln, schalte ich die Höhenangabe wieder ein, verkleinert sich der Button auf 15 Pixel.... Bin ich blöd, ist mein Browser doof oder dreht sich die Sonne nun wieder um die Erde???

nein, Du ignorierst lediglich die (-moz-)box-sizing-Eigenschaft.

Interssanterweise verändert sich die Darstellung der Button jedes Mal, wenn ich die Typ-Angabe ändere, die Klassen-Angabe jedoch belasse. Verstehe ich irgendeine CSS-Grundregel gerade nicht?

Ja: Jeder Browser hat das unveräußerliche Recht, jedem Element seine eigenen Basis-Styles mitzugeben. Die Genfer Konvention ist Firlefanz dagegen, sie ist so lasch wie 'ne Kreuzigung.

Cheatah