Attempting 2-column unordered lists in CSS

Currently, I've got a page with a database-generated list of bulleted items, each of which has a separate link describing the item. Done in tables (view source to see the mess):

Those of you with Internet Explorer 6 will notice that there's an ugly gap between the items, arbitrary bottom padding on the </ul> created by IE because what you're looking at is not one unordered list but three.
[I actually managed to solve this problem in the real-world project with the declarations
li { margin-right: 8px; list-style-type: disc; margin-left: -12px}
ul { margin-bottom: 0px; padding-bottom: -30px; }]

I was hoping that CSS could solve the problem by removing the whole table thing and using float: to keep all the stuff inside the <LI> tags. Here's the code I used (based on stuff from alistapart.com):

div.spacer {
  clear: both;
  }


li.sekt { 
}


li.sekt span.lileft {
  float: left;
  text-align: left;
  font-weight: bold;
  color: #fff;
  width: 35%;
  }


li.sekt span.liright {
  float: right;
  text-align: right;
  font-weight: bold;
  color: #ff0000;
  width: 35%;
  }

<table width="100%" border="5" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <ul>
        <li class="sekt" ><span class="lileft">item one sdfsdf sdf sdf sdf sdf 
          sdf sdf sdf s fds fd</span> <span class="liright">explanatory1</span></li>
        <div class="spacer"></div>
        <li class="sekt"><span class="lileft">item two</span> <span class="liright">explanatory2</span></li>
        <div class="spacer"></div>
        <li class="sekt"><span class="lileft">item three</span> <span class="liright">explanatory</span>3<br>
          hgk </li>
      </ul>
    </td>
    <td>
      <ul>
       <li class="sekt"><span class="liright">explanatory1</span>item one sdfsdf 
          sdf sdf sdf sdf sdf sdf sdf s fds fd </li>
        <li class="sekt"><span class="liright">explanatory2</span>item two</li>
        <li class="sekt"><span class="liright">explanatory3</span>item three<br>
          hgk </li>
      </ul>
    </td>
    <td>
      <ul>
        <li ><span style="float: right; border: 2px dotted #333;">explanatory1</span>item one sdfsdf sdf 
          sdf sdf sdf sdf sdf sdf s fds fd </li>
        <li ><span style="float: right">explanatory2</span>item two</li>
        <li ><span style="float: right">explanatory3</span>item three<br>
          hgk </li>
      </ul>
    </td>
  </tr>
</table>

And the resulting table in your browser:

Screen Shots:

Here's how it rendered in some browsers (note that for the most part, browser vendors are finally making the Mac and Windows renderers consistent):

IE 6/Win:

Second and third versions, fine. One departure from tables is the spillover item text going under the explanation, but then that's the difference between cells and wrappable aligns.

IE5.1.3/Mac:

Netscape 7/Win

Better than most, but only the first example actually respects the 35% width attribute. Also, there's an obnoxious crossover of the table borders as if to say, "use no non-CSS formatting, infidel."

Netscape 7/Mac

Consistent with Windows version.

W3C's own Amaya 6.2/Win:

Actually worse than most of the others. Automatically renders vertical alignment as Top rather than the center that should be default.

Opera 6/Win:

Reasonably good except that in the first, the <LI> inherits the span's color style -- a mistake in my book, and the second and third hand the bullet over to the first chunk of text they encounter in the line. Does not play well with table borders.

Opera 5/Mac

Consistent with Windows version.

Netscape 4.x/Win:

Just to make a point. If the first code choice were reliable across modern browsers I'd be tempted to go with it because it degrades gracefully.

Netscape 4.76/Mac

Consistent with Windows version.

(just for kicks) Dreamweaver 4/Win:

Doesn't know how to render complex CSS most of the time, making design a constant previewing process.

Dreamweaver 4/Mac

Consistent with Windows version.

Update (10.25.2002)

Rijk van Geijtenbeek from Opera offers an alternative but notes that there still isn't a common solution.
His page rendered rom left to right: IE 6.0.2, Op 6.05, NN 7.0, Amaya 6.2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(Amaya's display will remain exactly the same in all subsquent screengrabs.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">:

I'll spare you the trouble of looking up and down. The changes from transitional to strict:

IE6: The 2nd example from top moves the bullets from after explanation to after item.
Opera 6: No visible changes
NN7: 2nd example: Bullets vertically shifted up one line.

The three XHTML 1.0 DTDs for Transitional/Strict/Frameset render exactly the same as their HTML counterparts (at least, oin the PC platform).

Conclusion

If you have any useful suggestions please email me.