Danilo: CSS Submit Button IE Bug

Beitrag lesen

Hallo allerseits,

ich bin scheinbar auf einen IE (6 und 7) Bug gestoßen, doch alles Suchen mit diversen Kombinationen und bei einschlägigen Seiten ergab keine Treffer, die mein Problem auch nur erwähnen, geschweigedenn Lösungen.

Mehrere Submit-Button untereinander erhalten per CSS Hintergrundfarbe und keine Border.
Als optische Trennung sollen die Button nur einen unteren Rahmen erhalten.

Firefox zeigt genau das gewünschte. IE 6 und 7 zeigen zwar auch den unteren Rahmen in der gewünschten Farbe, fügen aber auch oben, rechts und links den Rahmen wieder hinzu und zwar transparent, so dass die Hintergrundfarbe (im Bsp. blau) des umschließenden Divs hindurchscheint. Außerdem gibt es einen seltsamen Hover-Effekt.

Ich habe das Problem zwar umgehen können, indem ich den unteren Rahmen dem form-Tag gegeben habe.

Trotzdem würde mich interessieren, ob es eine (CSS-)Lösung für das Problem (nur EINE Border von vier) gibt? Vielen Dank.

Einfacher Beispiel-Quelltext (border-bottom ist hier noch auskommentiert):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

body {
    background: #666;
    padding: 2em;
}

input {
    background: #999;
    padding: 2px 8px;
    width: 300px;
    border: 0;
/*  border-bottom: 1px solid red;*/
}

#navi {
    width: 300px;
    background: blue;
}

</style>
</head>
<body>
<div id="navi">
<form name="navi" action="" method="POST">
<input type="submit" name="button" value="Button">
</form>
</div>
</body>
</html>