display: block bei IE und Firefox

[CrushLog]

Hi,

ich weiss nicht genau, ob ich hier im richtigen Forum bin. Ich habe ein Problem mit der CSS Darstellung display: block bei einer Tabelle.
Ich möchte per Javascript eine Tabelle per Klick auf einen Button anzeigen lassen oder auch nicht. Soweit so gut, das Ganze funktioniert auch wunderbar, hier kurz der Code zum Verständnis:

function ToggleDetails (id) {
  if (document.getElementById("DetailsC_" + id).style.display == 'none') {
    document.getElementById("DetailsC_" + id).style.display = "block";
    document.getElementById("DetailsI_" + id).src = "img/navi/collapse.gif";
    document.getElementById("DetailsI_" + id).alt = "Details einklappen";
 }
  else {
    document.getElementById("DetailsC_" + id).style.display = "none";
    document.getElementById("DetailsI_" + id).src = "img/navi/expand.gif";
    document.getElementById("DetailsI_" + id).alt = "Details aufklappen";
  }
}

Die Tabelle wird von Anfang an angezeigt, das funktioniert auch, aber sobald ich sie einklappe und wieder ausklappe wird ja als Style display: block geschrieben. Beim IE funktioniert das auch und sieht normal aus. Nur beim Firefox wird die Tabelle komplett verschoben und nicht auf die ganze 100% Breite gezogen.
Ich hab das Problem soweit eingegrent, dass es nur bei display: block auftritt. Benutze ich display: table geht es beim Firefox wieder, aber beim IE geht das afklappen gar nicht mehr.
Weiss da jemand Rat, wie ich das lösen kann?

Danke im Vorraus!

 

[The Count]

Ein nützlicher Link hierzu scheint mir - trotz der englischen Sprache -
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_manip
zu sein.
FAZIT: das Attribute style ist z.B. eine IE proprietäre Lösung für das DOM (Document Object Model) - die Seite beschäftigt sich mit einigen Aspekten moderner W3C konformen Umsetzungen desselben.
Warnung : Soll die Seite auch noch mit alten Browsern funktionieren, wird einiges an Entscheidungslogik erforderlich!

 

[Quaese]

Hi,

nach dem, was ich hier testen konnte, funktioniert das mit der Eigenschaft "block" nur im IE korrekt.
Opera und Mozilla-Engines interpretieren "table" so, dass die Tabelle beim erneuten Aufklappen
wieder richtig angezeigt wird.

Du könntest das zum Beispiel mit einer Browserweiche lösen.

IE = document.all && !window.opera;    // IEs
DOM = document.getElementById && !IE;  // DOM-Browser

function ToggleDetails (id) {
  if (document.getElementById("DetailsC_" + id).style.display == 'none') {
    document.getElementById("DetailsC_" + id).style.display = (IE) ? "block" : "table";
    document.getElementById("DetailsI_" + id).src = "img/navi/collapse.gif";
    document.getElementById("DetailsI_" + id).alt = "Details einklappen";
 }
  else {
    document.getElementById("DetailsC_" + id).style.display = "none";
    document.getElementById("DetailsI_" + id).src = "img/navi/expand.gif";
    document.getElementById("DetailsI_" + id).alt = "Details aufklappen";
  }
}

Eine andere Möglichkeit wäre es, wenn Du Deine gesamte Tabelle in einen DIV-Container
packen würdest. Diesem gibst Du die ID, die bisher die Tabelle hatte. Damit blendest Du
die Tabelle über den Container ein bzw. aus.

Ciao
Quaese