display:block per Javascript

[Sanjoy]

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>