Angler: Buttons in CSS

Beitrag lesen

SELF-Forum

Buttons in CSS

Angler
– Informationen zu den Bewertungsregeln

Hallo,
also irgendwie steige ich anscheinend bei CSS nicht durch. Ich möchte sowas wie "Link-Buttons" erstellen, d.h. ein grüner Rahmen und darin ein Link (so das es eben wie ein Knopf aussieht). Soweit so gut, das ist auch kein Problem. Jetzt will ich aber 3 dieser "Buttons" nebeneinander(!) haben, d.h. in einer Zeile und ohne ne Tabelle zu benutzen. Soweit ich weiß muss das ja auch mit CSS gehen.
Okay folgender Code kam dabei raus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">  
  <meta name="generator" content="Adobe GoLive 6">  
  <title>Zitate</title>  
  <style type="text/css" media="screen"><!--  
   body { background: #c4cbd5 url(../gif/back.jpg) no-repeat fixed center; margin-top: 0; padding-top: 0 }  
   div.rahmen { display: table-footer-group; position: relative; width: 100% }  
   div.a_standart { background-color: #006060; display: table-cell; padding-top: 3px; position: relative; width: 250px; height: 30px; border: groove 2px white }  
   a.standart { color: white; font-size: 18px; font-family: "Times New Roman"; font-weight: bold; text-decoration: none; text-align: center; position: absolute; width: 250px }  
   a.standart:hover { color: #006060; background-color: white; letter-spacing: 1px }  
  --></style>  
 </head>  
  
 <body>  
  <div class="rahmen">  
   <div class="a_standart">  
    <a class="standart" href="(EmptyReference!)">Test A</a></div>  
   <div class="a_standart">  
    <a class="standart" href="(EmptyReference!)">Test B</a></div>  
   <div class="a_standart">  
    <a class="standart" href="(EmptyReference!)">Test C</a></div>  
  </div>  
 </body>  
</html>

So, nun habe ich 2 Probleme:

  1. Mozilla-Browser
    Hier werden die 3 "Buttons" zwar richtig nebeneinander angezeigt, jedoch kleben sie direkt aneinander, bäh, richtig häßlich. Wenn ich versuche per margin oder per padding den "Button"-Boxen(divs) einen Außenabstand zu geben, so zeigt das keine Wirkung. Wie kann ich den jetzt dafür sorgen das zwischen den "Buttons" so ca. 10 px freier Platz sind? Okay, könnte dazwischen noch ein "leeres dummy-div" einfügen, aber das ist ja nicht sinn der sache, es muss ja auch irgendwie anders gehen.
  2. Internet Explorer
    Hier wird es dann richtig doof. Und zwar werden die 3 "Buttons" auch angezeigt, aber(!) untereinander!!! Hallo? Warum macht der IE den sowas? Er beachtet die display-eigenschaft gar nicht oder wie? Woran kann das liegen das die div's nicht nebeneinander angezeigt werden und was muss ich tun damit der IE das ganze auch nebeneinander, in einer zeile, anzeigt?

Ich wäre für Hilfe echt, echt dankbar :-)

Beitrag melden
–
Informationen zu den Bewertungsregeln