Webmaster Forum / HTML, CSS, Scripts / CSS / June 2005

Hi!

On http://festest.hullin.net/index2.php?was=nurstruktur&ausklapp=,2, (make
sure to add that last comma to the URL), you can see a basic example of a
discussion board's tree structure. Right now, I'm doing the expanded text
box as a table, such as:

 <table cellpadding="0" cellspacing="0" width="634">
   <tr>
<!--   first the vertical lines connecting the lower postings to the
    -->
     <td style="background-image: url(/bilder/senkrecht.gif);
background-repeat: repeat-y; width:18px">
       &nbsp;
     </td>
<!--   then the text box itself       -->
     <td style="border:1px solid black;padding:3px;margin:12px;">
         {TEXT}
     </td>
   </tr>
             </table>

As I tried to convert this into CSS, I built a table-like construction using
the display property. Like:

<div style="display:table; margin:0px; padding:0px; width:634px">
 <div  style="display: table-row">
   <div style="display: table-cell; background-image:
url(/bilder/senkrecht.gif); background-repeat: repeat-y; width:18px">
   </div>

   <div style="display: table-cell; border:1px solid black; padding:
3px;margin: 12px;">
       {TEXT}
   </div>
 </div>
</div>

but in IE6, the outcome looks like this:

http://festest.hullin.net/funny.gif

The cells I'd like to have in one single row appear to have moved apart, and
I really don't know why. Isn't this exactly the way to do tables in CSS? Any
suggestions?

Regards,
Matthias