✔ Darstellungsproblem einer Tabelle in Firefox

Status
Nicht offen für weitere Antworten.
C

chicoco

Grünschnabel
Hallo Forum,

ich habe folgendes Problem:

Sobald ich diese Angabe: border-collapse:collapse; an meine Tabelle anwende, rutsch diese um 1px nach links, sodass Table-Head und Table-Body nicht mehr bündig sind. Die Darstellung in IE ist korrekt, aber leider in Firefox nicht. Ihr könnt euch diesen Fehler hier anschauen: http://scifi.pages.at/chicoco/forum/ff_problem/problem.gif

Quellcode hier: http://scifi.pages.at/chicoco/forum/ff_problem/ff_problem.html

In diesem Forum habe ich diesen Beitrag gefunden: http://forum.de.selfhtml.org/archiv/2005/9/t115181/#m736629 Er hat mir schon weiter geholfen, aber löst nicht ganz mein Problem, da ich unbedingt die Rahmen in Table-Body brauche.

Mit Hintergrundbildern (1x1 Pixel für den Rahmen) habe ich auch versucht zu simulieren, funktioniert hat es schon, aber dann tauchen andere Problemen in anderen Browsers auf.

Wie kann ich dieses Problem lösen?

Ich danke euch sehr im Voraus!
 
IMO dürfte das ein vollkommen richtiges Verhalten des Mozillas sein, da durch den Wegfall des Randes Platz frei wird und der Inhalt verschoben wird.

Ich würde hier den nicht standardisierten Tabellenhintergrund als falsches Element ansehen.

Micha
 
Hallo chicoco,
lass einfach die border-collapse-Eigenschaft weg und setze "border-spacing=0".

edit: Für den IE musst du allerdings die border-collapse-Eigenschaft per Conditional Comment setzen!
 
Zuletzt bearbeitet:
IMO dürfte das ein vollkommen richtiges Verhalten des Mozillas sein, da durch den Wegfall des Randes Platz frei wird und der Inhalt verschoben wird.

Stimmt! Wie konnte ich nur an FF zweifeln.
 
> Stimmt! Wie konnte ich nur an FF zweifeln.

Wenn Du nichtvalides HTML verwendest, mußt Du mit den Folgen rechnen.
 
Eine Lösung für mein Problem habe ich in einem anderen Forum erhalten. Ich werde sie einfach zitieren. Das wichtigste ist fett markiert.

Vielen Dank an Axel Richter und euch allen!

..........Im Forum habe ich diesen Beitrag gefunden: http://forum.de.selfhtml.org/archiv/2005/9/t115181/#m736629 Er hat mir schon weiter geholfen, aber löst nicht ganz mein Problem, da ich unbedingt die Rahmen in Table-Body brauche.

Genau so kannst Du aber um den Bug drumrum arbeiten. Für FireFox und Opera (der macht den Pixel rechts):
Code: 
table {
        border-spacing:0;
        margin:50px auto;
}

td {
        border:1px solid #000;
        border-left-style:none;
        border-top-style:none;
        padding:0;
        margin:0;
        height:30px;
        text-align:center;
}

]td:first-child {
        border-left-style:solid;
}

th {
        border:0px;
        padding:0;
        margin:0;
        height:30px;
}


Für den IE dann _danach_ folgend:

<!--[if IE]>
<style>
table {
        border-collapse:collapse;
}

td {
        border:1px solid #000;
        padding:0;
        margin:0;
        height:30px;
        text-align:center;
}
</style>
<![endif]-->
Zum Vergrößern anklicken....
 
Navy hat gesagt.:
... Wenn Du nichtvalides HTML verwendest, mußt Du mit den Folgen rechnen.
Zum Vergrößern anklicken....
Allerdings zeigt der FF dieses Verhalten auch, wenn man einen validen Quelltext hat. Der FF kommt tatsächlich mit der border-collapse-Eigenschaft nicht zurecht. Im oben geschilderten Beispiel geht es zwar nur um 1px, der Bug wird aber deutlicher, wenn man z.B. wie im angehängten Beispiel bei Tabellen mit überlangem Inhalt den Tabellen-Body mit einer diskreten Höhe versieht und ihn über die overflow-Eigenschaft scrollfähig macht. Falls man hier die border-collapse-Eigenschaft einsetzt, zeigt der FF ganz irres Verhalten bei der Darstellung der Zellenrahmen des Tabellen-Bodys. Das Verhalten scheint vom Tabelleninhalt abhängig zu sein.

Bitte mal mein angehängtes Beispiel im FF, Mozilla oder Netscap ansehen und anschließend den Kommentar aus der border-collapse-Eigenschaft heraus nehmen:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>FF-Bug: Test-Tabelle</title>

<style type="text/css">
* {
    margin: 0;
    border: 0;
    padding: 0;
}
html, body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 100.1%;
    color: #000;
    background-color: #fff;
}
table {
    margin: 0 auto;
    border: 1px solid #000;
/*    border-collapse: collapse;*/
    border-spacing: 0;
}
tbody {
    overflow: auto;
    overflow-x: hidden;
    height: 15em;
}
th {
    background-color: #999;
    color: #fff;
}
th, td {
    border: 1px solid #ccc;
    padding: 5px;
}
</style>

</head>
<body>

<h1>Test-Tabelle</h1>

<table summary="">
<thead>
  <tr>
    <th>Tabellenspalte 1</th>
    <th>Tabellenspalte 2</th>
    <th>Tabellenspalte 3</th>
  </tr>
</thead>
<tbody>

<script type="text/javascript">
for (i=0;i<40;i++)
  document.write('<tr><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td></tr>');
</script>

</tbody>
</table>
</body>
</html>
 
Zuletzt bearbeitet:
Zum Thema Hintergrundgraphik in Tabellen:
"Die verbreiteten Web-Browser unterstützen auch die Angabe von Hintergrundbildern mit Wallpaper-Effekt, doch diese Angaben gehörten nie zum HTML-Standard."
http://de.selfhtml.org/html/tabellen/gestaltung.htm

Ich finde auch nichts in den HTML-Spezifikationen zu Hintergrundgraphiken in Tabellen. Warum allerdings der Validator nicht anspringt kann ich nicht sagen, wahrscheinlich wird diese Eigenschaft einfach hingenommen. Schlechter Stil ist es trotzdem.

Das von beschriebene Collapseverhalten konnte ich reproduzieren, nur schweigt sich Bugzilla über das Problem aus... Mhmm. Ist mir ehrlich gesagt auch noch nie unter gekommen. Mal sehen was die mailingliste sagt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück