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...)