Frage stellen
ich möchte Buttons und Links in derselben Zeile auf gleicher Höhe ausrichten und im selben Design darstellen. Meine Lösung funktioniert zwar im Firefox, aber in vielen anderen Browsern nicht (IE, Opera, Konqueror).
Vieleicht wißt Ihr, wie man das besser machen kann?
- Code: Alles auswählen
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
body {color:#333; background-color:#fff; font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:16px;}
div {background-color:#f0f0f0;}
form {overflow:hidden;}
input, select, textarea {width:auto; font-family: Verdana, Arial, Helvetica, Sans-Serif; border-width:2px; border-style:solid; border-color:#5e5e5e #fafafa #fafafa #5e5e5e; background-color:#00ff80; color:#222;}
input, textarea {padding:2px 2px 2px 4px;}
input[type=submit], input[type=button], input[type=file] {font-weight:bold; border-width:4px; border-style:solid; border-color:#fafafa #5e5e5e #5e5e5e #fafafa; margin:4px 12px 4px 0px; padding:4px;}
a.show-as-button {color:#222; line-height:33px; font-weight:bold; border-width:4px; border-style:solid; border-color:#fafafa #5e5e5e #5e5e5e #fafafa; background-color:#00ff80; margin:4px 12px 4px 0px; padding:4.5px 5px; text-decoration:none;}
</style>
</head>
<body>
<div>
<form action="some action" method="POST">
<input type="submit" name="button1" value="This is a Button"/>
<a class="show-as-button" href="www.foo.bar">This is a Link</a>
</form>
</div>
</body>
</html>