Rahmenlinien bei Tabellen fehlen teilweise

f.gruber

Hallo,
es geht um fehlerhafte Darstellung bei Tabellen. Der Tabelleninhalt wird über PHP aus einer MySQL Datenbank befüllt.

Teilweise fehlen Rahmenlinien. Manchmal nur am rechten Rand, bei manchen Tabellen fehlen zeilenweise alle Linien, dann werden wieder einige gezeichnet ...

Folgende Stildefinitionen werden in untenstehendem Beispiel angewendet:

Code

table { empty-cells:show; border-collapse: collapse; }
td { padding: 4; font-size: 10pt; border: 1px solid #7C7C7C; }

Interessant ist, dass die Rahmenlinien nach einem Reload der Seite (F5) immer richtig dargestellt werden. Aber beim ersten Laden der Seite gibt es oftmals fehlende Linien, manchmal mehr, manchmal weniger.

Und noch etwas:
Wenn ich die gleiche Seite lokal öffne, also z.B. http://localhost/site.html, dann gibt es nie ein Darstellungsproblem bei diesen Tabellen.

Hier ist ein Link zu einer dieser Problemseiten. Bei diesem Beispiel fehlen bei mir meist einige Linien am rechten Rand der Tabellle, aber nicht bei jeder Zeile.
Bitte teilt mir mit, ob bei euch ebenfalls Linien fehlen, wenn ihr diese Seite öffnet.
Außerdem bin ich für jeden Tipp dankbar, der mich einer Lösung näher bringen könnte.

http://hs-schallerbach.at/Schueler/Schue…chuelerAlle.php

bugcatcher

Liegt offensichtlich am border-collapse:collapse;. Scheint ein Bug im 3.6 zu sein. In den Vorgängern (3.0 und 3.5) sowiee im kommenden Firefox 4.0 tritt das Problem im Übrigen nicht auf.

Wenn das ein großes Problem für dich ist, dann musst Du wohl einen Workaround machen. Ansonsten einfach auf 4.0 warten.

f.gruber

Ja, es ist für mich ein erhebliches Problem. Ich habe andere aus Datenbanken generierte Seiten, bei denen es noch schlimmer aussieht.

Wie könnte so ein Workaround gehen. Mir fällt leider gar nichts ein.

Bin nicht gerade ein Profi, muss ich zugeben.

bugcatcher

Sowas in der Richtung?

Code

<style>
table{
 border-collapse:separate;
 border-spacing:0;
}
th{
 border:0 solid #000000;
 border-width:1px 0 1px 1px;
}
th.lastEntry{
 border-right-width:1px;
}
td{
 border:0 solid #000000;
 border-width:0 0 1px 1px;
}
td.lastEntry{
 border-right-width:1px;
}
</style>


<table>
 <tr>
  <th>Header1</th>
  <th>Header2</th>
  <th>Header3</th>
  <th class="lastEntry">Header4</th>
 </tr>
 <tr>
  <td>Content1</td>
  <td>Content2</td>
  <td>Content3</td>
  <td class="lastEntry">Content4</td>
 </tr>
 <tr>
  <td>Content1</td>
  <td>Content2</td>
  <td>Content3</td>
  <td class="lastEntry">Content4</td>
 </tr>
</table>

Alles anzeigen

f.gruber

Danke für diesen Tipp.
Leider müsste ich da viele Seiten durchforsten und bei jeder Tabelle die richtigen Stile (Klassen) setzen.

Ich habe eine einfachere Lösung vorgezogen, die glaube ich auch helfen dürfte:
Im Stylesheet:

Code

td, th { border: 2px solid #E0E0E0; } /* vorher: 1px solid #7C7C7C */

Durch Verwendung einer helleren Farbe für die Rahmenlinien schaut es gut aus, obwohl sie jetzt 2px breit sind.
Ich habe es nicht sehr intensiv getestet, aber mein erster Eindruck ist, dass keine oder zumindest kaum Störungen bei der Anzeige der Tabellenlinien auftreten.

Beispiel:
http://abendmusikdaten.c12535.s10-irmler.irmler.at/konzerte.php

f.gruber

Zitat von f.gruber
Ich habe eine einfachere Lösung vorgezogen, die glaube ich auch helfen dürfte:
Im Stylesheet:
Code
td, th { border: 2px solid #E0E0E0; } /* vorher: 1px solid #7C7C7C */
Durch Verwendung einer helleren Farbe für die Rahmenlinien schaut es gut aus, obwohl sie jetzt 2px breit sind.
Ich habe es nicht sehr intensiv getestet, aber mein erster Eindruck ist, dass keine oder zumindest kaum Störungen bei der Anzeige der Tabellenlinien auftreten.

... war leider eine Täuschung - funktioniert auch nicht immer.

Dann habe ich folgendes probiert:

Code

<p>Falls die Seite fehlerhaft angezeigt wird, bitte hier klicken: 
    <a href="javascript: window.location.reload();"> Seite neu landen</a></p>

Das funktioniert oft aber nicht immer.

Wie kommt so ein Fehler zustande? Wo liegt da eigentlich das Problem?
Man sollte ja glauben, dass so etwas durch einen Firefox Patch zu beheben sein müsste.

bugcatcher

Hab doch gesagt, das ist ein Bug. Und der Patch ist Firefox 4.

Wenn dich eine Dicke von 2 Pixeln bei den Rahmen nicht stört, kannst du auch folgendes machen:

Code

table{
 border-collapse:separate;
 border-spacing:0;
 border:1px #000000 solid;
}
th,td{
 border:1x solid #000000;
}