PHP Blogger

Startseite Schreib mir ne Mail! RSS Abo Webnews

CSS: Kein Display table-row im IE

2. Juli 2008 um 10:00 · Gehört zu CSS, Javascript, Quick Hacks

Heute: wie löst man die Problematik, dass der Internet Explorer nichts mit dem CSS-Display-Typ “table-row” anfangen kann?

Grundproblem: ich musste mit einer Funktion Tabellenzeilen ein- und ausblenden. Am besten hat es bei mir mit einer Exception funktioniert:

var el= document.getElementById("el_id");
try
{
  if(el) el.style.display= (el.style.display == "none" ? "table-row" : "none");
}
catch(e)
{
  // Der IE bis V7 kann kein table-row, deshalb Fallback auf 'Block'
  el.style.display= "block";
}

Für den Fall, das die Exception anspringt, wenn es das Element in der Variable “el” nicht gibt, habe ich vor dem Ansprechen des selben ein kleines IF eingebaut.

Nach einigen Hinweisen meiner lieben Leser, jetzt nochmal die JS-Kurzfassung:

var el= document.getElementById("el_id");
  if(el) el.style.display= (el.style.display == "none" ? "" : "none");

Erklärung: Mit dem Leerstring wird der Browser dazu veranlasst, auf den Standard-Wert umzuspringen (Und der ist immer richtig, deshalb wird auch keine Exception geschmissen).

Ähnliche Artikel:

  1. Ein bisschen mehr Geek bitte ;)
  2. ul.dropdown li:hover > ul {display: block}
  3. Table ‘wordpress.wp_post2cat’ doesn’t exist
  4. PEAR ist kein Framework
  5. auto_increment mit ALTER TABLE

Christoph meint dazu:

3. Juli 2008 um 09:13

Ich habe irgendwo im Hinterkopf, dass eine CSS-Eigenschaft auf den Ursprungswert des Elements zurückgesetzt wird, wenn man einen leeren String übergibt, also:
el.style.display = ”; // = block

Aber so ganz sicher bin ich mir da gerade nicht mehr…

tobias vogt meint dazu:

3. Juli 2008 um 20:57

der Christoph hat völlig recht. ein el.style.display = ”; setzt das Element auf Standard zurück.

Andreas Stephan meint dazu:

6. Juli 2008 um 12:07

eine andere Möglichkeit: Anstatt direkt mit dem Attribut zu arbeiten, kann man das ganze auch über Klassen lösen. Für den IE bindet man dann ein conditional Stylesheet mit den entsprechenden Regeln ein, also z.B.

/* standards compliant */
.row{
display: table-row;
}

.cell{
display: table-cell;
}

/*ie*/
* html .row, *+html .row{
display: block;
}

* html .cell, *+html .cell{
display: inline-block;
}

und dann einfach das Klassenattribut per JS ändern.

Webagentur meint dazu:

15. Juli 2008 um 21:35

Vielen Dank Andreas,

so wie Du es genannt hast funktioniert es wunderbar.

timi meint dazu:

29. Juli 2008 um 20:37

@Christoph: Manchmal ist die einfachste Lösung die Beste. Vielen Dank! Ich kannte das zwar, aber manchmal sieht man den Wald vor lauter Bäumen nicht.

@Andreas: Auch ein hervorragender Tipp! Dankeschön…

Jeremy meint dazu:

7. Juni 2009 um 21:09

Tausend Dank für diesen Hinweis!

Tobias Herrmann meint dazu:

28. Januar 2010 um 15:10

Der IE8 macht mittlerweile zwar bei table-row mit, darauf konnte ich mich allerdings nicht ganz verlassen.

Daher vielen Dank für diese Anweisungen!

RSS für Kommentare zu diesem Artikel · TrackBack URI

Schreib Deine Meinung