IE zickt rum beim Ausblenden von Tabellenspalten

[Gunnar Bittersmann]

Hello out there!

http://gunnarbittersmann.de/2007/ie-problem-20070105/TEST.html

Mittels JavaScript setze ich Klassen, so dass mit CSS Tabellenspalten ausgeblendet werden sollen ('visibility: collapse' für Browser[tm]; 'display: none' für IEs).

Klappt auch im Firefox; im IE aber nicht. Die IE Developer Toolbar zeigt für die betreffenden Tabellenspalten 'display: none' an, diese sind aber dennoch zu sehen. Wie kann das sein? Was lässt sich dagegen tun?

Ist das ein 'hasLayout'-Problem? Es ist mir nicht gelungen, durch eine der Angaben von http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp Abhilfe zu schaffen.

See ya up the road,
Gunnar

[Ingo Turski]

Hi,

Mittels JavaScript setze ich Klassen, so dass mit CSS Tabellenspalten ausgeblendet werden sollen ('visibility: collapse' für Browser[tm]; 'display: none' für IEs).

ausgeblendet wird bei mir nichts. Sowohl Firefox 1.0.8 als auch IE7 stellen die Spalten lediglich schmaler dar.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

ausgeblendet wird bei mir nichts. Sowohl Firefox 1.0.8 als auch IE7 stellen die Spalten lediglich schmaler dar.

Je nachdem, wie viele Spalten man per Buttonclick schmal macht, sollten rechts mehr oder weniger Spalten ausgeblendet sein, so dass das Ganze immer die gleiche Breite ± 1 hat. (10 breite / 9 breite und 1 oder 2 schmale / 8 breite und 3 oder 4 schmale / ...)

See ya up the road,
Gunnar

[Axel Richter]

Hallo,

http://gunnarbittersmann.de/2007/ie-problem-20070105/TEST.html

Mittels JavaScript setze ich Klassen, so dass mit CSS Tabellenspalten ausgeblendet werden sollen ('visibility: collapse' für Browser[tm]; 'display: none' für IEs).

In Deinem CSS steht:

  
...  
.Col11Hidden #colBox11,  
.Col11Hidden #colVertical11,  
{  
 display: none;  
}  

Diese Selektoren matchen auf Elemente mit der ID "colBox11", welche _innerhalb_ von Elementen mit der Klasse "Col11Hidden" sind und auf Elemente mit der ID "colVertical11", welche _innerhalb_ von Elementen mit der Klasse "Col11Hidden" sind.

Dein generiertes HTML sieht so aus:

  
<col id="colBox11" class="ColBoxFooBar"><col class="ColVertical" id="colVertical11">  

Nehmen wir an, Du setzt die Klasse dieser COL-Elemente per Script auf "Col11Hidden". Dann würde die Selektoren immer noch nicht matchen. Dafür müssten sie

.Col11Hidden#colBox11,
.Col11Hidden#colVertical11,

heißen, eben Elemente mit der ID "colBox11" _und_ der Klasse "Col11Hidden".

viele Grüße

Axel

[Gunnar Bittersmann]

Hello out there!

Nehmen wir an, Du setzt die Klasse dieser COL-Elemente per Script auf "Col11Hidden".

Das tu ich nicht. Die Klasse trägt das 'div' mit der ID "canvas". Besser gesagt, die Klassen: Initial sieht’s so aus: "Col11Hidden Col12Hidden ... Col20Hidden". (letzte Zeile der Funktion 'hideCols()' im JavaScript-Code ganz unten)

Dann würde die Selektoren immer noch nicht matchen.

Dann würde das Ganze im Firefox ja auch nicht funktionieren. Tut es aber. (getestet für > 1.5)

Und wie gesagt, die IE(!!) Developer Toolbar zeigt für "colBox11", "colBox12", ... "colBox20" für die 'display'-Eigenschaft auch den Wert "none" an.

Solle es etwa so sein, dass die IE Developer Toolbar das anzeigt, was die rendering engine eigentlich machen müsste; diese tut dann aber doch was anderes? Wie lässt sich trotz Bugs die gewünschte (Nicht-)Anzeige erreichen?

See ya up the road,
Gunnar

[wahsaga]

hi,

Die Klasse trägt das 'div' mit der ID "canvas". Besser gesagt, die Klassen: Initial sieht’s so aus: "Col11Hidden Col12Hidden ... Col20Hidden".

Sind multiple Klassen für ein Element nicht im IE u.U. problematisch?

(Ich hab da was im Gedächtnis, dass er bei gleicher Spezifität nur eine davon berücksichtigt.)

gruß,
wahsaga

[Axel Richter]

Hallo,

Sind multiple Klassen für ein Element nicht im IE u.U. problematisch?
(Ich hab da was im Gedächtnis, dass er bei gleicher Spezifität nur eine davon berücksichtigt.)

Hm, aber eigentlich nur, wenn der Selector _ein_ Element mit mehreren Klassen (also .foo.bar) oder _ein_ Element mit ID und Klasse (also .foo#bar oder #foo.bar) matchen soll _und_ wenn es dann auch noch _unterschiedliche_ CSS-Angaben für z.B. .foo.bar und .foo.blubb gibt. Siehe http://forum.de.selfhtml.org/archiv/2006/6/t131477/#m850501.

Folgendes mini-Testszenario läuft jedenfalls:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<!--[if IE]>  
<style type="text/css">  
.Col1Hidden #colBox1 { display:none; }  
.Col2Hidden #colBox2 { display:none; }  
.Col3Hidden #colBox3 { display:none; }  
</style>  
<![endif]-->  
<!--[if !IE]>-->  
<style type="text/css">  
.Col1Hidden #colBox1 { visibility:collapse; }  
.Col2Hidden #colBox2 { visibility:collapse; }  
.Col3Hidden #colBox3 { visibility:collapse; }  
</style>  
<!--<![endif]-->  
<script type="text/javascript">  
<!--  
function collapse(nr) {  
  var myDiv = document.getElementById("myDiv");  
  myDiv.className += " Col" + nr + "Hidden";  
  alert(myDiv.className);  
}  
//-->  
</script>  
</head>  
<body>  
<div id="myDiv" class="Col0Hidden Col4Hidden">  
<div id="regalContainer" class="Aufbaualternative0">  
<table border="1">  
 <col id ="colBox1" class="ColBoxFooBar">  
 <col id ="colBox2" class="ColBoxFooBar">  
 <col id ="colBox3" class="ColBoxFooBar">  
<tr>  
 <td>Zelle 1 1</td>  
 <td>Zelle 1 2</td>  
 <td>Zelle 1 3</td>  
</tr>  
<tr>  
 <td>Zelle 2 1</td>  
 <td>Zelle 2 2</td>  
 <td>Zelle 2 3</td>  
</tr>  
</table>  
</div>  
</div>  
<button onclick="collapse(1);">collapse(1)</button>  
<button onclick="collapse(2);">collapse(2)</button>  
<button onclick="collapse(3);">collapse(3)</button>  
</body>  
</html>  

Gunnar, eventuell bastelst Du ja hier mal weiter ;-):

viele Grüße

Axel

[Gunnar Bittersmann]

Hello out there!

Gunnar, eventuell bastelst Du ja hier mal weiter ;-):

Hab ich. Änderung im Quelltext: Die Tabellenelemente stehen nicht im HTML, sondern werden per JavaScript (DOM) erzeugt. Und schon geht’s im IE nicht mehr.

http://gunnarbittersmann.de/2007/ie-problem-20070105/axel1.html

See ya up the road,
Gunnar

[Axel Richter]

Hallo,

Hab ich. Änderung im Quelltext: Die Tabellenelemente stehen nicht im HTML, sondern werden per JavaScript (DOM) erzeugt. Und schon geht’s im IE nicht mehr.

http://gunnarbittersmann.de/2007/ie-problem-20070105/axel1.html

Das ist wohl ein ähnliches Problem, wie das mit dem im IE-DOM _unbedingt_ explitzit nötigen TBODY-Element. Wenn man ein COLGROUP-Element einfügt geht's wieder.

  
window.onload = function ()  
{  
 var myTable = document.getElementById("myTable");  
  
 var colgroup = document.createElement("colgroup");  
 myTable.appendChild(colgroup);  
  
 var col = document.createElement("col");  
 col.id = "colBox1";  
 col.className = "ColBoxFooBar";  
 colgroup.appendChild(col);  
  
 var col = document.createElement("col");  
 col.id = "colBox2";  
 col.className = "ColBoxFooBar";  
 colgroup.appendChild(col);  
  
 var col = document.createElement("col");  
 col.id = "colBox3";  
 col.className = "ColBoxFooBar";  
 colgroup.appendChild(col);  
...  

viele Grüße

Axel

[Gunnar Bittersmann]

Hello out there!

Mir ist auf dem Weg draußen an frischer Luft¹ noch eingefallen, dass ich an anderer Stelle ebenfalls Spalten dynamisch ein- und ausblende – bei einer ebenfalls dynamisch generierten Tabelle. Einziger Unterschied: bei jener Tabelle werden nur die Kinder von 'tbody' mit JavaScript generiert², nicht wie bei dieser aller Kinder von 'table'.

Mein nächster Gedanke wäre gewesen, auch hier alle 42 'col'-Elemente³ ins HTML zu schreiben; aber

Wenn man ein COLGROUP-Element einfügt geht's wieder.

das gefällt mir besser. Vielen Dank.

See ya up the road,
Gunnar

¹ Das hinderlichste Werkzeug beim Programmieren ist ein Computer.

² 'col'-Elemente auch hier als Kinder von 'table'; Ein-/Ausblenden funktioniert in dem Fall im IE auch ohne 'colgroup'.

³ 42 ist hier kein metasyntaktischer Wert; ist sind wirklich so viele.

[Gunnar Bittersmann]

Hello out there!

Sind multiple Klassen für ein Element nicht im IE u.U. problematisch?

Das betrifft, wie Axel schon sagte, die Selektion von foo.bar.baz, zu der der IE unfähig ist.

Ich hab mal in der Funktion hideCols die Zuweisung geändert auf den festen Wert
  document.getElementById("canvas").className = "Col5Hidden";

und in den Stylesheets ergänzt
  .Col5Hidden #colBox5 {visibility: collapse}

bzw. im IE-Styelsheet
  .Col5Hidden #colBox5 {display: none}

Jetzt ist nichts mehr mit multiplen Klassen im Spiel.

Da nur die breite Spalte mit der ID "colBox5" betroffen ist (die mit dem Button), nicht aber die mit der ID "colVertical5", sollte die Veränderung des Musters sofort auffallen.

Tut sie auch im Firefox. IE nada. Der zeigt in seiner Developer Toolbar für "colBox5" brav 'display: none' an (für alle anderen 'display: block'); dargestellt wird diese Spalte aber trotzdem.

Mit dem Botton hat´s auch nichts zu tun; dasselbe (also nichts!) passiert auch, wenn ich im Stylesheet statt "colBox5" angebe
  .Col5Hidden #colVertical5 {display: none}

Number Five is alive!

Keine Ahnung, ob ich mich dem Problem jetzt besser top down oder bottom up annähern soll. Oder ob es das überhaupt wert ist. Einen Bug zu finden ist das eine; ihn zu umgehen das andere.

Vielleicht fällt einem von Euch ja noch was ein.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

http://gunnarbittersmann.de/2007/ie-problem-20070105/TEST.html

Mittels JavaScript setze ich Klassen,

Argl, Links einbinden:
http://gunnarbittersmann.de/2007/ie-problem-20070105/TEST.js

so dass mit CSS Tabellenspalten ausgeblendet werden sollen

http://gunnarbittersmann.de/2007/ie-problem-20070105/TEST.css

('visibility: collapse' für Browser[tm];

http://gunnarbittersmann.de/2007/ie-problem-20070105/notmsie.css

'display: none' für IEs).

http://gunnarbittersmann.de/2007/ie-problem-20070105/msie.css

See ya up the road,
Gunnar