nicht angemeldet
CSS Submit Button IE Bug
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>
-
Beim CSS bitte noch ein
form {
margin: 0;
}notieren, um den Bug besser hervorzuheben.
-
Hi,
ich bin scheinbar auf einen IE (6 und 7) Bug gestoßen
denke ich nicht. http://www.w3.org/TR/CSS21/box.html#border-properties:
»Note. Notably for HTML, user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.«alles Suchen mit diversen Kombinationen und bei einschlägigen Seiten ergab keine Treffer, die mein Problem auch nur erwähnen, geschweigedenn Lösungen.
Der IE möchte halt diesem Interface-Element einen Rahmen geben - also lass ihn das tun:
input { border: 1px solid; border-color: #999 #999 red }freundliche Grüße
Ingo-
Hallo,
vielen Dank für die Antwort.
Note. Notably for HTML, user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.
Bedeutet dieser Hinweis nun, dass dieses Verhalten erlaubt(!) ist oder dass es mancher Browser eben nicht korrekt umsetzt?
input { border: 1px solid; border-color: #999 #999 red }Damit könnte ich die ungewollten Rahmenteile quasi blind schalten, ja. Das Problem ist, dass in meinem konkreten Fall die Buttons einen Verlauf als Hintergrund haben. Ich kann also den Rahmen leider nicht so aussehen lassen wie die Buttonoberfläche.
Es gibt also keine Möglichkeit, im IE Buttons nur eine Rahmenseite zu geben?
Viele Grüße
Danilo-
Hi,
Note. Notably for HTML, user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.
Bedeutet dieser Hinweis nun, dass dieses Verhalten erlaubt(!) ist oder dass es mancher Browser eben nicht korrekt umsetzt?
es wird dem Browser - zu Recht übrigens - freigestellt, solche Elemente anders zu formatieren. Nicht nur Du als Seitenautor hast ein Interesse an einem einheitlichen Design, sondern auch der Browserhersteller an einem einheitlichen Skin. Und dem Anwender kommt das oft auch zugute, denn so erkennt er Steuerelemente nicht nur in der Browserleiste, sondern auch innerhalb der Seite.
Auf manchen Seiten sind die Absendebuttons von Formularen so verunstaltet, dass ich es übel finde, wenn mein Browser sowas zuläßt.Es gibt also keine Möglichkeit, im IE Buttons nur eine Rahmenseite zu geben?
nicht dass ich wüsste.
freundliche Grüße
Ingo-
Schade, trotzdem vielen Dank.
-
-
-