rig: [und DHTML] Fehlerhaftes verhalten

Beitrag lesen

SELF-Forum

[und DHTML] Fehlerhaftes verhalten

rig
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich generiere eine Tabelle, bei welcher einige Zeilen mittels style="display:none;" versteckt sind. Per Klick auf ein Image koennen dann diese Zeilen durch den User ein- bzw. wieder ausgeblendet werden. Funktioniert WUNDERBAR.
Problem ist nur, das der IE, wenn man eine Weile mit der Seite "rumgespielt" hat (also ein paar Mal die versteckten Zeilen ein- bzw. ausgeblendet hat), Probleme bei der Darstellung hat.

Dieses sieht dann bei mir wie folgt aus:

Der HTML-Code ist laut "http://validator.w3.org/" sauber, genauso wie das CSS. Ich nutze den IE-Browser in der Version "6.0.2800.xxxxx". FireFox hat keine Probleme damit.

Hätte jemand eine Ahnung, woran das liegt? Durch Probieren hab ich rausgefunden, daß das Problem -nicht- auftritt, wenn man

"border-collapse:collapse;"
   ODER "<colgroup> ... </colgroup>"

entfernt, aber ich würde beides gerne drin lassen wollen ("collapse" weil wegen Layout und "colgroup" weil wegen Breitendefinition der Spalten [ist im Bsp-Code nicht enthalten])

Gruß
  rig

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  
<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
  <title>Was ist hier falsch?</title>  
  <script type="text/javascript">  


  
   function __f(_id) {  
      var trObj = document.getElementById('img_' + _id);  
  
      var w_displayProp = '';  
  
      if(trObj.src.indexOf("down.gif") > 0) {  
      trObj.src = "http://de.selfhtml.org/src/next.gif";  
      w_displayProp = '';  
      } else {  
      trObj.src = "http://de.selfhtml.org/src/down.gif";  
      w_displayProp = 'none'  
      }  
  
      for(var i = 1; ; i++) {  
      var childObj = document.getElementById(_id + i);  
      if (childObj == null)  
      break;  
      childObj.style.display = w_displayProp;  
      }  
   }  


  
  </script>  
  <style type="text/css">  


  
   th {  
      border-style: ridge;  
      border-width: 2px;  
      padding:5px 10px;  
      text-align:center;  
   }  
  
   td {  
      border-style: ridge;  
      border-width: 2px;  
      padding:5px;  
   }  
  
   table {  
      border-width:0px;  
      border-collapse:collapse;  
   }  


  
  </style>  
 </head>  
 <body>  
  <table>  
   <colgroup>  
    <col>  
    <col>  
   </colgroup>  
   <tr>  
    <th>Teilnehmer</th>  
    <th>Beschreibung</th>  
   </tr>  
  <!-- 1. Zeile -->  
   <tr id="x1">  
    <td><img alt="[x]" id="img_x1" onclick="__f('x1');" src="http://de.selfhtml.org/src/down.gif" />Markus Mustermann</td>  
    <td>&nbsp;</td>  
   </tr>  
   <tr id="x11" style="display:none;">  
    <td colspan="2">ein<br />test</td>  
   </tr>  
  <!-- 2. Zeile -->  
   <tr id="x2">  
    <td><img alt="[x]" id="img_x2" onclick="__f('x2');" src="http://de.selfhtml.org/src/down.gif" />Maria Mustermann</td>  
    <td>&nbsp;</td>  
   </tr>  
   <tr id="x21" style="display:none;">  
    <td colspan="2">ein<br />test</td>  
   </tr>  
  <!-- 3. Zeile -->  
   <tr id="x3">  
    <td><img alt="[x]" id="img_x3" onclick="__f('x3');" src="http://de.selfhtml.org/src/down.gif" />Maik Mustermann</td>  
    <td>&nbsp;</td>  
   </tr>  
   <tr id="x31" style="display:none;">  
    <td colspan="2">ein<br />test</td>  
   </tr>  
  <!-- 4. Zeile -->  
   <tr id="x4">  
    <td><img alt="[x]" id="img_x4" onclick="__f('x4');" src="http://de.selfhtml.org/src/down.gif" />Martha Mustermann</td>  
    <td>&nbsp;</td>  
   </tr>  
   <tr id="x41" style="display:none;">  
    <td colspan="2">ein<br />test</td>  
   </tr>  
  </table>  
 </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln