Schon wieder unschöner Abstand in Tabelle

[Enrico]

Hallo,

in einem anderen Thread habt ihr mir mit einem Anzeigeproblem bei Tabellen (unschöner Abstand) weitergeholfen.

Nun ist das Problem seltsamerweise wieder aufgetreten, trotz aller vorgeschlagener Definitionen.

Es werden die linke obere Ecke, der linke Rahmen und das linke untere Eck zusammenhängend ausgegeben, also ohne Abstand, sowie der obere Rahmen, das rechte obere Eck, der rechte Rahmen, das rechte untere Eck, der untere Rahmen und die mittlere Zelle, aber zwischen dem linken oberen Eck, dem linken Rahmen, dem linken unteren Eck und dem Rest der Tabelle habe ich einen kleinen Abstand:

+-  --------------+
|                 |
|                 |
+-  --------------+

Meine Definitionen sind wie folgt (ich habe jetzt mal den kompletten Code reinkopiert):

---------
html-Code
---------

<table>
    <tr>
        <td id="Fenster_Eck_Links_Oben"></td>
        <td id="Fenster_Rahmen_Oben"></td>
        <td id="Fenster_Eck_Rechts_Oben"></td>
    </tr>
    <tr>
        <td id="Fenster_Rahmen_Links"></td>
        <td id="Fenster">Test, Test, Test<br>Test, Test, Test<br>Test, Test, Test</td>
        <td id="Fenster_Rahmen_Rechts"></td>
    </tr>
    <tr>
        <td id="Fenster_Eck_Links_Unten"></td>
        <td id="Fenster_Rahmen_Unten"></td>
        <td id="Fenster_Eck_Rechts_Unten"></td>
    </tr>
</table>

--------
css-Code
--------

table
{
   border-collapse: collapse;
   border-padding:  0px;
   border-spacing:  0px;
   display:         block;
   margin:          0px;
   overflow:        hidden;
   padding:         0px;
}

td
{
   border: 0px;
}

#Fenster_Rahmen_Oben,
#Fenster_Rahmen_Unten
{
   height: 8px;
}

#Fenster_Rahmen_Links,
#Fenster_Rahmen_Rechts
{
   width: 8px;
}

#Fenster_Rahmen_Oben
{
   background: url(../../Grafiken/Formulare/Fenster_Rahmen_Oben.png) repeat-x;
}

#Fenster_Rahmen_Rechts
{
   background: url(../../Grafiken/Formulare/Fenster_Rahmen_Rechts.png) repeat-y;
}

#Fenster_Rahmen_Unten
{
   background: url(../../Grafiken/Formulare/Fenster_Rahmen_Unten.png) repeat-x;
}

#Fenster_Rahmen_Links
{
   background: url(../../Grafiken/Formulare/Fenster_Rahmen_Links.png) repeat-y;
}

#Fenster_Eck_Links_Oben,
#Fenster_Eck_Rechts_Oben,
#Fenster_Eck_Rechts_Unten,
#Fenster_Eck_Links_Unten
{
   height: 8px;
   width:  8px;
}

#Fenster_Eck_Links_Oben
{
   background: url(../../Grafiken/Formulare/Fenster_Eck_Links_Oben.png) no-repeat;
}

#Fenster_Eck_Rechts_Oben
{
   background: url(../../Grafiken/Formulare/Fenster_Eck_Rechts_Oben.png) no-repeat;
}

#Fenster_Eck_Rechts_Unten
{
   background: url(../../Grafiken/Formulare/Fenster_Eck_Rechts_Unten.png) no-repeat;
}

#Fenster_Eck_Links_Unten
{
   background: url(../../Grafiken/Formulare/Fenster_Eck_Links_Unten.png) no-repeat;
}

#Fenster
{
   background: url(../../Grafiken/Formulare/Fenster_Hintergrund.png) repeat;
   bottom:        100px;
   left:          51px;
   margin-right:  -20px;
   overflow-Y:    auto;
   overflow-x:    hidden;
   padding-right: 20px;
   right:         51px;
   top:           100px;
}

Die Grafiken sind auch alle so groß wie im css-Code angegeben, d.h. hier gibt es keine Grafik, die die Tabelle "sprengen" könnte.

Woran kann der unschöne Abstand liegen?

Vielen Dank und Gruß
Enrico

[apsel]

Om nah hoo pez nyeetz, Enrico!

Jeder, der dies mit dem Ziel dir zu helfen nachvollziehen möchte, kann dies nicht, weil er die Grafiken nicht zur Verfügung hat. Ein Online-Beispiel wäre sinnvoll. Matthias

[Enrico]

Hallo Matthias,

erstmal danke für Deine Antwort.

kann dies nicht, weil er die Grafiken nicht zur Verfügung hat

Die Grafiken sind alle maximal 8px groß, genauso habe ich es auch im css-Sheet definiert, d.h. hier wird nichts "gesprengt".

Meines Erachtens sollten aber mehrere Lücken auftreten, wenn hier etwas nicht stimmen sollte, ich habe aber nur eine einzige, die aber schon reicht ;-)

Ein Online-Beispiel wäre sinnvoll

Kann ich leider nicht liefern, weil ich die Seite lokal entwickle.

Gruß
Enrico

[apsel]

Om nah hoo pez nyeetz, Enrico!

Kann ich leider nicht liefern, weil ich die Seite lokal entwickle.

kannst du nicht? Oder möchtest du nicht? Für ersteres gibt es kostenlose Geschichten wie zum Beispiel Lima-City.

Matthias

[Enrico]

Hallo Matthias,

ich werde das ganze nun per div-Blöcke umsetzen, da weiß ich, dass es klappt.

Ich hätte deswegen nur gerne eine Tabelle verwendet, weil sich die Tabelle samt Rahmen automatisch der Breite/Höhe des Inhaltes angepasst hätte und trotzdem, aufgrund ihrer Ausrichtung, immer zentriert geblieben wäre, was bei 9 einzelnen div-Bereichen eher schwieriger umzusetzen wäre, aber in diesem Fall muss ich dann wohl auf statische Positionierungen ausweichen.

Trotzdem danke für Deine Hilfsbereitschaft.

Gruß
Enrico

[Detlef G.]

Hallo Enrico

… immer zentriert geblieben wäre, was bei 9 einzelnen div-Bereichen eher schwieriger umzusetzen wäre, aber in diesem Fall muss ich dann wohl auf statische Positionierungen ausweichen.

Wozu statische (du meinst sicher absolute) Positionierungen?
Es gibt auch Methoden, mittels CSS Grafiken als Ecken und Ränder zu verwenden.

Neuere Browser kennen border-image, womit dies wohl am einfachsten wäre.
Sollen auch ältere Browser unterstützt werden, könnten dich der Artikel „Runde und andere Ecken für skalierbare Boxen” interessieren.

Auf Wiederlesen
Detlef