Angler: Buttons in CSS

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

  1. Buttons in CSS

    Benny
    – Informationen zu den Bewertungsregeln
    1. Mozilla-Browser

    Versuch mal display: inline statt der table sachen, dann sollte das mit margin-left: 5px; margin-right: 5px; auch funktionieren

    1. Internet Explorer

    Das liegt am DOCTYPE wenn du den entfernst wird es korrekt angezeigt. Siehe meinen Post ;-)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Buttons in CSS

      Angler
      – Informationen zu den Bewertungsregeln

      Hmm, danke für die schnelle Antwort, aber ich weiß nicht so recht.

      1. Du sagst ich solle "inline" nehmen? Okay, das habe ich glaube ich schon ganz zu Beginn versucht, und soweit ich mich erinneren kann funktionierte das auch nicht, entweder sah es dann ganz komisch aus oder es ging gar nix beim IE

      2. Wenn ich den DOCTYPE weglasse, oh mein Gott, auf die Seite soll ja noch mehr als die 3 Butons. Und ohne den DOCTYPE würden meine div's im IE sowas von häßlich aussehen -> Box-Modell-Fehler -> also ne, DOCTYPE brauche ich unbedingt damit meine div's, Rändern, Abstände, etc.. im IE wie in Mozilla aussehen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Buttons in CSS

        Benny
        – Informationen zu den Bewertungsregeln

        Hmm, danke für die schnelle Antwort, aber ich weiß nicht so recht.

        1. Du sagst ich solle "inline" nehmen? Okay, das habe ich glaube ich schon ganz zu Beginn versucht, und soweit ich mich erinneren kann funktionierte das auch nicht, entweder sah es dann ganz komisch aus oder es ging gar nix beim IE

        Liegt ebenfalls am DOCTYPE, damit scheint der IE nicht wirklich zurecht zu kommen. ES funktioniert bei mir NUR wenn ich den DOCTYPE weglasse! Wirft freilich wieder andere Probleme auf.

        1. Wenn ich den DOCTYPE weglasse, oh mein Gott, auf die Seite soll ja noch mehr als die 3 Butons. Und ohne den DOCTYPE würden meine div's im IE sowas von häßlich aussehen -> Box-Modell-Fehler -> also ne, DOCTYPE brauche ich unbedingt damit meine div's, Rändern, Abstände, etc.. im IE wie in Mozilla aussehen.

        Interessant, ich hab hier nur den IE (Intranet), dass ist bis jetzt meine Lösung...

        Ich schätze mal das ist ein weiterer Bug des IE, keine Ahnung woran das liegt. Den DOCTYPE wegzulassen sehe ich auch nicht als Lösung.

        Das mit den Box-Fehlern finde ich interessant, ich teste das mal, da ich ein Problem mit den ouset-Rändern habe. Insofern erstmal danke...

        mfg Benny

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Buttons in CSS

          Cheatah
          – Informationen zu den Bewertungsregeln

          Hi,

          Liegt ebenfalls am DOCTYPE, damit scheint der IE nicht wirklich zurecht zu kommen. ES funktioniert bei mir NUR wenn ich den DOCTYPE weglasse!

          das bedeutet dann, dass der Gedankengang ungünstig war. In den Quirks-Mode zu wechseln ist niemals eine Lösung.

          Ich schätze mal das ist ein weiterer Bug des IE, keine Ahnung woran das liegt.

          Ich bin nicht sicher, ob ich verstanden habe, von welchen Problemen ihr redet; aber vermutlich ist Floating ein Lösungsweg.

          Den DOCTYPE wegzulassen sehe ich auch nicht als Lösung.

          Jau :-)

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Buttons in CSS

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    div.rahmen { display: table-footer-group;
       div.a_standart { display: table-cell;

    Du erwartest doch nicht ernsthaft vom IE, daß er diese display-Werte korrekt interpretieren könnte?

    1. 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?

    Oh, Du erwartest das doch?!
    Erwartest Du auch einen 6er im Lotto, obwohl Du gar nicht Lotto spielst?

    Optimist!

    float scheint mir das passende zu sein. Oder noch besser der Verzicht auf IE ;-)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln