nicht angemeldet
Hallo zusammen,
ich habe eine wirklich knifflige Aufgabe, Lob dem, der sie lösen kann:
Es geht darum, dass ein <a> Element genauso aussehen soll, wie ein entsprechendes <button> Element. Ziel ist es, dass zu den Formularbuttons auf meiner Seite ebenfalls Links definieren werden können, die genauso aussehen und sich genauso verhalten, wie der Button.
Für Blitzdenker, denen nun sofort ein <button type="button" onclick="...">Button</button> einfällt sei an dieser Stelle gleich gesagt: Das ganze muss ohne JavaScript laufen - sonst wär´s ja zu einfach für die Forumgemeinde. ;-)
Das Problem:
Das Beispiel unten sieht im Firefox schon fast perfekt aus. Der Abstand der Elemente zu den umgebenen Trennlinie ist noch nicht identisch. Das ist doof, weil es letztlich so sein soll, dass die Buttons auf einer Höhe stehen werden (könnte man aber noch durch ein vertical-align: middle einer umschließenden divs umgehen).
Schlimmer im Internet Explorer. Dieser fügt den Buttons automatisch ein padding links und rechts hinzu. Und das ist nicht mal Pixelgenau, sondern prozentual zur Textlänge. Wie bekomm ich das raus?
Bonus:
Am Ende soll es möglich sein, drei Buttons nebeneinander darzustellen. Einen links, einen zentriert und einen rechts. Ebenfalls soll man den Buttons wahlweise eine feste Breite mitgeben können. Wenn das alles zusammen realisiert wird, gibt´s ne Belohnung. :-)
Herzlichen Dank für jeden Input,
bechte
Das Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyButtons</title>
</head>
<body>
<button type="submit" class="myButton">
<span class="shadow">
<span class="content">kurz</span>
</span>
</button>
<button type="submit" class="myButton">
<span class="shadow">
<span class="content">mittellang</span>
</span>
</button>
<button type="button" class="myButton">
<span class="shadow">
<span class="content">sehr langer Button</span>
</span>
</button>
<hr />
<a href="#" class="myButton"><span class="shadow"><span class="content">kurz</span></span></a>
<a href="#" class="myButton"><span class="shadow"><span class="content">mittellang</span></span></a>
<a href="#" class="myButton"><span class="shadow"><span class="content">sehr langer Button</span></span></a>
</body>
</html>
Das bisherige CSS:
a.myButton,
button.myButton {
background: transparent;
border: none;
color: #000;
font-family: Verdana;
font-size: 10px;
font-weight: 700;
}
a.myButton,
a.myButton:active
a.myButton:hover {
text-decoration: none;
}
a.myButton { margin: 1px 0; padding: 1px 3px; }
button.myButton { margin: 0; padding: 1px 0; }
a.myButton span.shadow,
button.myButton span.shadow { border: 1px solid #000; }
a.myButton span.content,
button.myButton span.content {
background-color: #eee;
border-bottom: 1px solid #888;
border-left: 1px solid #fff;
border-right: 1px solid #888;
border-top: 1px solid #fff;
}
Gunnar Bittersmann