Sanjoy: display:block per Javascript

SELF-Forum

display:block per Javascript

Sanjoy
– Informationen zu den Bewertungsregeln

Hallo liebe Helfer,
ich habe mehrere <span>-Elemente in einer Tabellenzelle. Diese sind zunächst nicht sichtbar (display:none).
Wenn ich diese per Javascript sichtbar mache
for (var i=1; i<=8; i++) {
document.getElementById("preview_row" + i).style.display = "block";  }
dann erscheinen diese zwar, aber es entsteht eine sonderbare Lücke zwischen den einzelnen span-Elementen, allerdings nur im Internet Explorer (6). Wenn ich allerdings die Elemente von Anfang an auf display:block setze, dann habe ich diese Lücken nicht.
Was mache ich bloß falsch??

CSS-Auszug:
#td_preview span {
 display:none;
 line-height:1;
 border:1px solid #000;
 padding:0;
 margin:0;
}

HTML-Auszug:
 <table>
  <tr>
   <td id="td_preview">
    <span id="preview_row1">&nbsp;</span>
    <span id="preview_row2">&nbsp;</span>
    <span id="preview_row3">&nbsp;</span>
    <span id="preview_row4">&nbsp;</span>
    <span id="preview_row5">&nbsp;</span>
    <span id="preview_row6">&nbsp;</span>
    <span id="preview_row7">&nbsp;</span>
    <span id="preview_row8">&nbsp;</span>

</td>
   <td id="td_showHeight">test</td>
  </tr>
  <tr>
   <td id="td_showWidth">test</td>
   <td>test</td>
  </tr>
 </table>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. display:block per Javascript

    nam Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Guten Morgen!

    aber es entsteht eine sonderbare Lücke zwischen den einzelnen span-Elementen,

    Das kann ich nicht nachvollziehen. Hier ein Screenshot (links im IE7 und rechts im IE6).

    Und das ist mein (bzw. dein) Code:

      
<?xml version="1.0" encoding="UTF-8" ?>  
<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Test</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
<script type="text/javascript">  
<![CDATA[  
window.onload=function init() {  
    for (var i=1; i<=8; i++) {  
        document.getElementById("preview_row" + i).style.display = "block";  
    }  
};  
]]>  
</script>  
<style type="text/css">  
#td_preview span {  
 display:none;  
 line-height:1;  
 border:1px solid #000;  
 padding:0;  
 margin:0;  
}  
</style>  
  
</head>  
<body>  
 <table>  
  <tr>  
   <td id="td_preview">  
    <span id="preview_row1">&nbsp;</span>  
    <span id="preview_row2">&nbsp;</span>  
    <span id="preview_row3">&nbsp;</span>  
    <span id="preview_row4">&nbsp;</span>  
    <span id="preview_row5">&nbsp;</span>  
    <span id="preview_row6">&nbsp;</span>  
    <span id="preview_row7">&nbsp;</span>  
    <span id="preview_row8">&nbsp;</span>  
  
   </td>  
   <td id="td_showHeight">test</td>  
  </tr>  
  <tr>  
   <td id="td_showWidth">test</td>  
   <td>test</td>  
  </tr>  
 </table>  
  
</body>  
</html>

    Gruss,
    Mathias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. display:block per Javascript

      Sanjoy
      – Informationen zu den Bewertungsregeln

      Hallo Mathias,

      vielen vielen lieben Dank für deine Mühe.
      Ich hatte die Funktion im onload-Event im Body stehen - komischerweise hab ich nur dann das Problem?! Aber egal...
      Jetzt habe ich diese Funktion...zu testzwecken stark vereinfacht und wieder das Problem mit den Lücken!
      function changeText() {
       for (var i=1; i<=8; i++) {
         document.getElementById("preview_row" + i).innerHTML = "Hallo";
       }
      }

      Verstehe es einfach nicht...

      Liebe Grüße
      Sanjoy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. display:block per Javascript

        nam Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi Sanjoy

        kannst du mal den ganzen Code der HTML-Seite irgendwo hochladen oder hier einfügen?
        Hat es vielleicht was mit Quirks-Mode zu tun?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln