Enrico: Zellenabstand trotz padding/margin = 0

Hallo,

mich plagt eine seltsame Anzeige-Ungereimtheit im Firefox:

Ich entwerfe meine Buttons gerade über eine selbst erstellte html-Seite, um diese dann, wenn alles passt, per Screenshot "abfotografieren" und zuzuschneiden, so dass ich letztendlich nur noch die fertigen Buttons habe.

Ich verwende zur Erstellung eine Tabelle, in der ich in die Zellen ich jeweils die Buttonecken als Grafiken einfüge und die Umrandungen als Hintergrundgrafiken definiere.

Wenn ich nun die Button-Beschriftungen einfüge, dann passt sich Zelle dem Inhalt an und ich bekomme jeweils 100% passende Buttons.

Mein Problem ist nun aber, dass ich zwischen den Zellen immer einen kleinen Abstand habe, den ich einfach nicht wegbekomme.

Mit dem doctype habe ich schon experimentiert, aber ohne Erfolg. Momentan steht er auf:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Die Tabellendefinitionen sehen auszugsweise wie folgt aus:

table,
   tr,
   td,
   td.Eck_links_oben,
   td.Umrandung_Rahmen_oben,
   td.Eck_rechts_oben
   {
      padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;
      border:0px;
   }

td.Eck_links_oben
   {
      width:9px;
      height:9px;
      background: url(Grafiken/Umrandung_Eck_links_oben.png);
   }

td.Umrandung_Rahmen_oben
   {
      height:9px;
      background-image:url(Grafiken/Umrandung_Rahmen_oben.png);
      background-repeat:repeat-x;
   }

Der zugehörige html-Code folgendermassen:

<table border="0">
      <tr>
         <td class="Eck_links_oben"></td>
         <td class="Umrandung_Rahmen_oben"></td>
         <td class="Eck_rechts_oben"></td>
      </tr>
      <tr>
         <td class="Umrandung_Rahmen_links"></td>
         <td>Neuigkeiten</td>
         <td class="Umrandung_Rahmen_rechts"></td>
      </tr>
      <tr>
         <td class="Eck_links_unten"></td>
         <td class="Umrandung_Rahmen_unten"></td>
         <td class="Eck_rechts_unten"></td>
      </tr>
   </table>

Die Grafiken sind auch 9px hoch und/oder breit, das passt.

Den html-Code habe ich ebenfalls ohne Abstände definiert:

html,
   body
   {
      font-weight:       bold;
      font-family:       Arial;
      font-size:         14px;
      margin:            0px 0px 0px 0px;
      padding:           0px 0px 0px 0px;
      width:             100%;
      height:            100%;
      overflow:          hidden;
      background-image:  url(Grafiken/Holzmaserung_Body.png);
      background-repeat: repeat;
   }

Wie gesagt bzw. geschrieben werde ich die Tabellenkonstruktion lediglich zur Erzeugung der Buttons verwenden, wenn alles fertig ist, dann verwende ich nur noch die Grafiken selber.

Wie bekomme ich den unschönen Abstand weg?

Vielen Dank für eure Hilfe.

Gruß
Enrico

  1. Lieber Enrico,

    bist Du sicher, dass Du padding und margin auch für die betreffenden img-Elemente auf Null gesetzt hast?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Hallo Felix,

      bist Du sicher, dass Du padding und margin auch für die betreffenden img-Elemente auf Null gesetzt hast?

      Das hatte ich nicht, habe es aber ergänzt, leider ebenfalls wieder ohne Erfolg:

      img
         {
            display:block;
            padding:0px 0px 0px 0px;
            margin:0px 0px 0px 0px;
         }

      Mann, Mann, Mann, ich bin erschüttert, wie schnell man html- und css-Programmierung wieder vergessen kann, wenn man nicht immer am Ball ist ;-)

      Gruß
      Enrico

      1. Mann, Mann, Mann, ich bin erschüttert, wie schnell man html- und css-Programmierung wieder vergessen kann, wenn man nicht immer am Ball ist ;-)

        Ich bin geschüttelt, dass man so was überhaupt lernen kann ;)

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Hi,

          Na, dann bitte ich doch förmlichst und höflichst gnädigerweise um Nachsicht, es lag natürlich nicht in meiner Absicht, bei Dir durch mein Anliegen Schüttelattacken verursacht zu haben ;-)

          Viele Grüsse
          Enrico

          1. Hallo,

            da ich mich mit Flash weniger als gar nicht auskenne, hatte ich mir überlegt, bei MouseOver die grafischen Schaltflächen durch animierte gif-Dateien auszutauschen, die aber lediglich für ein farbliches Einblenden der Beschriftungen sorgen sollen, bei MouseOut wird analog dazu eine ausblendende gif-Grafik angezeigt.

            Wenn ich nun die animierten gif-Grafiken vorlade, werden die Animationen dann sofort gestartet oder erst, sobald ich die Grafiken anzeigen lasse?

            Ich hoffe, ihr habt verstanden, worauf ich hinaus will... ;-)

            Viele Grüsse
            Enrico

            1. Hi,

              Wenn ich nun die animierten gif-Grafiken vorlade, werden die Animationen dann sofort gestartet oder erst, sobald ich die Grafiken anzeigen lasse?

              das ist nicht festgelegt und kann je nach Browser unterschiedlich sein. Und mir ist keine Methode bekannt, definiert auf eine GIF-Animation einzuwirken.

              Ciao,
               Martin

              --
              Die letzten Worte des Neandertalers:
              Möchte doch zu gern wissen, was in der Höhle ist ...
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. Hallo Martin,

                ok, Idee verworfen ;-)

                Dachte ich mir schon fast schon...

                Danke und Gruß
                Enrico

  2. Hi,

    table,
       tr,
       td,
       td.Eck_links_oben,
       td.Umrandung_Rahmen_oben,
       td.Eck_rechts_oben
       {
          padding:0px 0px 0px 0px;
          margin:0px 0px 0px 0px;
          border:0px;
       }

    Tabelleninterne Elemente (td, tr, tbody, ... - genauer: die mit display-werten table-cell, table-row, table-row-group ...) haben keinen margin, Angaben dafür werden also ignoriert.

    Wie gesagt bzw. geschrieben werde ich die Tabellenkonstruktion lediglich zur Erzeugung der Buttons verwenden, wenn alles fertig ist, dann verwende ich nur noch die Grafiken selber.

    Wie bekomme ich den unschönen Abstand weg?

    border-spacing und evtl. border-collapse für die Tabelle wären Ansatzpunkte.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    1. Hi Andreas,

      Andreas, Du bist mein Held !!! :-)

      Menschenskinder, dad war's :-)

      Vielen, vielen Dank :-)

      Gruß
      Enrico

      PS: Wie bereits geschrieben, das hat man davon, wenn man mal ab vom Schuß ist... ;-)