Zeilen einer Tabelle ausblenden im IE

[Bastian]

Hi,

es geht um folgende Seite:
http://tsg-esslingen.de/d/abteilungen/tennis/spielplan.php?navid=68
Die Seite läuft über ein CMS, ich hab dort jetzt aber eigenes Javascript eingebaut um bei einem Klick auf „Alle Mannschaften“ „Herren 1“ usw die richtigen Zeilen ein- bzw. auszublenden. Funktioniert im Firefox und im Opera auch ohne Probleme. Im IE allerdings leider nicht :(
Die Spaltenbreiten ändern sich dort komischer weise anscheinend.

Ich hab keine Ahnung woran das liegen könnte, kann mir da jemand weiter helfen?

Viele Grüße
Basti

PS: Sorry ich weiß der Code ist lang, die Spielplan-Tabelle kommt ab Zeile 1748, mein Javascript kommt ziemlich am Anfang ab Zeile 47. Ich habe versucht das Problem zu extrahieren um nicht die ganze Seite hier posten zu müssen, konnte es aber bei kleinen Beispielen leider nicht rekonstruieren.

[plan_B]

Hallo,

... Funktioniert im Firefox und im Opera auch ohne Probleme. Im IE allerdings leider nicht :(
Die Spaltenbreiten ändern sich dort komischer weise anscheinend.

Ich hab keine Ahnung woran das liegen könnte, kann mir da jemand weiter helfen?

... ein schöner Tabellensalat. Ich hab' aufgegeben, die Struktur mit dem CSS zu vergleichen.

Was macht der IE? Er stellt die anzuzeigenden Tabellenzeilen nur so breit dar, wie es der Inhalt der Zellen erfordert. Wahrscheinlich ist die Spaltenbreitendefinition nicht ausreichend, aber wo da am besten anzusetzen ist, kann ich auch nicht sagen.

mit javascript hat das ganze jedenfalls nix zu tun. Es wird nur die display-Eigenschaft einzelner Tabellenzeilen auf "" bzw. "none" gesetzt.

Gruß plan_B

[Bastian]

Hi,
die Schuld am CSS und HTML Salat geb ich mal dem CMS, daran hab ich nichts gemacht :) (nur minimal was am HTML). Nur das Javascript habe ich selber geschrieben.

Bin jetzt den Tabelle-Code nochmal durchgegangen und habe einige Kleinigkeiten gestrichen so dass es etwas übersichtlicher ist.
Ich habe auch schon eine unterste leere Zeile hinzugefügt mit den selben Breitenangaben wie in den col-Elementen, hat aber leider auch nichts gebracht.

Was mich noch wundert ist, dass Problem tritt bei "Damen 40" und "Alle Mannschaften" nicht auf sondern nur bei "Herren 1", "Herren 2", "Damen" und "Herren 40".
Werde jetzt mal versuchen ob eine oberste leere Zeile hilft (die wird bei "Herren 1", ... im Gegensatz zu "Alle Mannschaften" und "Damen" ausgeblendet).

Viele Grüße
Bastian

[plan_B]

Hallo,

Was mich noch wundert ist, dass Problem tritt bei "Damen 40" und "Alle Mannschaften" nicht auf sondern nur bei "Herren 1", "Herren 2", "Damen" und "Herren 40".

"Damen 40" enthält die längsten Texte, das bestimmt bisher die Spaltenbreite.

Werde jetzt mal versuchen ob eine oberste leere Zeile hilft (die wird bei "Herren 1", ... im Gegensatz zu "Alle Mannschaften" und "Damen" ausgeblendet).

besser du übst ein Tabellenlayout mit einer kleinen Testseite.
Stellst vollkommen auf CSS um. So ist es wirklich grausam. Ich mag gar nicht alle Sünden aufzählen ... (Thread wird ja archiviert)

Gruß plan_B

[Bastian]

Hi plan_B,

Stellst vollkommen auf CSS um. So ist es wirklich grausam. Ich mag gar nicht alle Sünden aufzählen ... (Thread wird ja archiviert)

Das passt zu den 149 Fehler bei der Validation. Einige kommen sicher von meinem eingefügten Javascript (die werd ich noch verbessern).

Das chaotische CSS/HTML ist aber wie gesagt komplett vom CMS generiert, daran hab ich so gut wie nichts gemacht. Ich dachte eigentlich ein CMS generiert immer w3c konformen Code, ist dann ja aber anscheinend nicht so.
Vielleicht sollte man beim CMS auch einfach nur auf der grafischen Oberfläche bleiben und sich den Code besser nicht anschaun :)

Naja immerhin optisch funktionierts jetzt auf gängigen Browsern, das ist schonmal was.

Viele Grüße
Bastian

[plan_B]

Hallo,

Stellst vollkommen auf CSS um. So ist es wirklich grausam...

Das passt zu den 149 Fehler bei der Validation. Einige kommen sicher von meinem eingefügten Javascript (die werd ich noch verbessern).

auch durch Auslagern des javascripts in eine eigene Datei liessen sich die Validatorfehler vermindern.

Das chaotische CSS/HTML ist aber wie gesagt komplett vom CMS generiert, daran hab ich so gut wie nichts gemacht. ...

möglicherweise lassen sich die Templates etwas optimieren.

Dachte mir, kann nicht falsch sein, ein wenig Tabellenlayout zu üben. Orientiert habe ich mich an deinem Spielplan.

eine 4-spaltige Tabelle, die 2.Spalte rechtsbündige Texte, 3.Spalte zentriert.
Das lässt sich anscheinend nicht mit per <col> oder <colgroup> definieren.

CSS2 17.3, 17.5.4

http://www.htmlcodetutorial.com/tables/_COL.html

hier ein gescheiterter Versuch, den zunächst nur der IE wie gewünscht darstellt.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>test tab css</title>  
<style type="text/css">  
  
table.termine {  
 table-layout:fixed;  
 background-color:#ffc;  
  }  
  
table.termine caption {  
  font-size:2em;  
 }  
  
table.termine col.col1 {width:100px; text-align:  left; background-color:#ffa;}  
table.termine col.col2 {width:250px; text-align: right; background-color:#ff6;}  
table.termine col.col3 {width:25px;  text-align:center; background-color:#ffc;}  
table.termine col.col4 {width:250px; text-align:  left; background-color:#ff6;}  
  
table.termine th {  
 text-align:left;  
 padding-top:30px;  
 font-family:verdana;  
  font-size:1em;  
 background-color:#ffe;  
 }  
  
table.termine td {  
 font-family: arial,verdana;  
 font-size:0.8em;  
 }  
  
.gast {color:#f00;}  
  
</style>  
</head>  
<body>  
  
<table class="termine">  
<caption>Spielplan 2008</caption>  
  
<colgroup>  
 <col class="col1">  
 <col class="col2">  
 <col class="col3">  
 <col class="col4">  
</colgroup>  
  
<tbody id="gp_tbody">  
<tr><th colspan=4 >31.05.08</th><tr>  
<tr><td>14:00 Uhr</td><td>Damen 40 1</td><td>-</td><td class="gast">TC Hochdorf-Reichenbach 2</td><tr>  
  
<tr><th colspan=4>01.06.08</th><tr>  
<tr><td>09:00 Uhr</td><td>Herren 2</td><td>-</td><td class="gast">TV Altenriet 1</td><tr>  
<tr><td>09:00 Uhr</td><td>Herren 1</td><td>-</td><td class="gast">TA TSV Sondelfingen 1</td><tr>  
<tr><td>09:00 Uhr</td><td class="gast">TA TSV Ötlingen 2</td><td>-</td><td>Damen 1</td><tr>  
  
</tbody>  
</table>  
</body>  
</html>  

Opera kann man noch zur Textausrichtung bewegen mit dem col-Attribut, also
  <col class="col2" align="right">
  <col class="col3" align="center">

Gunnar schlägt zur Lösung die Pseudoklassen :first-child, :last-child  usw. vor, ist zwar umständlich so die 2. und 3. Spalte zu definieren , aber funktioniert dann doch:

  
table.termine td:first-child+td  { text-align:right;}  
table.termine td:first-child+td+td  { text-align:center;}  

vielleicht gibt's ja noch ein paar Verbesserungsvorschläge ...

Gruß plan_B

[Bastian]

Hi plan_B,
danke für die Mühe!
Jetzt ist mir auch klar was du mit komplett auf CSS umsteigen gemeint hast, ich wusste gar nicht dass man damit auch komplette Tabellen definieren kann.
Das CSS sieht auf jeden Fall elegant aus, ist allerdings bei einer großen Tabelle wie bei mir leider vermutlich recht aufwändig. Kommt man ja vermutlich nicht drum rum das alles per Hand einzugeben, oder?
Viele Grüße
Bastian

[ChrisB]

Hi,

Jetzt ist mir auch klar was du mit komplett auf CSS umsteigen gemeint hast, ich wusste gar nicht dass man damit auch komplette Tabellen definieren kann.

Wie meinen?
Die Tabelle steht doch in seinem Beispiel nach wie vor im HTML-Code - wo sie ja auch hingehoert, wenn tabellarische Daten ausgezeichnet werden sollen.

MfG ChrisB

[Bastian]

Hi,
ah total übersehen, dachte das sei komplett CSS, hast natürlich recht und das ist nicht so.
Gruß
Bastian

Hi,

Jetzt ist mir auch klar was du mit komplett auf CSS umsteigen gemeint hast, ich wusste gar nicht dass man damit auch komplette Tabellen definieren kann.

Wie meinen?
Die Tabelle steht doch in seinem Beispiel nach wie vor im HTML-Code - wo sie ja auch hingehoert, wenn tabellarische Daten ausgezeichnet werden sollen.

MfG ChrisB

[JürgenB]

Hallo Bastian,

versuch mal, mit <colgroup> und <col> (http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren) die Spaltenbreiten vorzugeben.

Gruß, Jürgen

[JürgenB]

Hallo Bastian,

du solltest auch noch die vielen Fehler im HTML beseitigen, vor allem die in der Tabelle:
http://validator.w3.org/check?uri=http://tsg-esslingen.de/d/abteilungen/tennis/spielplan.php?navid=68

Gruß, Jürgen

[Bastian]

Hi Jürgen,
danke für die Tipps.
colgroup hat das CMS selber schon angelegt. Die Validation zeigt ja leider viele Fehler an (149), ich habe mir einige angeschaut und konnte sie nicht nachvollziehn.
z.B.:
Line 96, Column 90: end tag for element "B" which is not open.
…Name("SPAN")[0].innerHTML="<b>Alle</b><br><b>Mannschaften</b>";
Sieht für mich als HTML-Anfänger allerdings eigentlich korrekt aus.

Line 241, Column 57: there is no attribute "HEIGHT".
<table border="0" cellpadding="0" cellspacing="0" height="100%">
Ich dachte height müsste es geben:
http://de.selfhtml.org/html/tabellen/gestaltung.htm#breiten_hoehen

Glaube am großteil der restlichen Fehler ist dann das CMS "Schuld".

Viele Grüße
Bastian

[JürgenB]

Hallo Bastian,

Line 96, Column 90: end tag for element "B" which is not open.
…Name("SPAN")[0].innerHTML="<b>Alle</b><br><b>Mannschaften</b>";
Sieht für mich als HTML-Anfänger allerdings eigentlich korrekt aus.

das ist ein Teil des Javascripts:

document.getElementById('gp_am').getElementsByTagName("SPAN")[0].innerHTML="<b>Alle</b><br><b>Mannschaften</b>";

und hier muss der "/" maskiert werden, also ...</b>";

Line 241, Column 57: there is no attribute "HEIGHT".
<table border="0" cellpadding="0" cellspacing="0" height="100%">
Ich dachte height müsste es geben:
http://de.selfhtml.org/html/tabellen/gestaltung.htm#breiten_hoehen

Tabellen haben keine Höhe, nur deren Zellen. Zitat:

<table height="..."> ... gehörte jedoch nie zum HTML-Standard.

Glaube am großteil der restlichen Fehler ist dann das CMS "Schuld".

allerdings kann man sich auf Javascript, das die Darstellung verändert, nur verlassen, wenn das HTML in Ordnung ist. Die Fehler mit den nicht maskierten "&" sind hier unkritisch, aber die Fehler in der Tabelle, um die es geht, würde ich auf jeden Fall korrigieren.

Gruß, Jürgen

[Bastian]

Hallo Jürgen,

danke für die Erklärung! Werde ich dann natürlich verbessern.

Viele Grüße
Bastian

[Bastian]

Problem gelöst!
Habe eine oberste leere Zeile eingebaut die immer angezeigt wird. So funktionierts.

Ich vermute mal der Internet Explorer verarbeitet die col-Elemente indem er den Zellen in der ersten Zeile eine width gibt. Da ich die oberste Zeile ausgeblendet habe, hatte er keine width mehr für die Spalten und hat deshalb die Tabellenzellen nur noch so groß wie nötig angezeigt.
(Warums mit einer leeren Zeile ganz unten nicht geklappt hat weiß ich nicht, vermutlich hatte ich da was falsch gemacht)

Ich hoffe die vielen Validation-Fehler sind kein Problem, optisch sieht es jetzt in meinem FF,Opera und IE so aus wie wenn es passt.

Vielen Dank nochmal für Eure Tipps
Basti