So I thought I'd try to modify an unordered list by adding extra text within spans and then positioning these absolutely, as per this simple example with just one pseudo column:
<li><a href="foo.php">List item One <span class="time">Date1</span></a></li>
<li><a href="bar.php">List item Two <span class="time">Date2</span></a></li>
<li><a href="soap.php">List item Three <span class="time">Date3</span></a></li>
The css code for the list is standard display:block stuff with width and hovers etc, but the spans are set thus:
left: 400px; /*distance to page-left */
This works perfectly with one limitation and two exceptions:
(1) The Date text (pseudo column) is positioned relative to the viewport which is okay, but can I position it absolutely, relative to the parent <div> so that it works in a fluid layout?
(2) The above works in FF_Mac, Saf_Mac, FF_PC, Op_PC and Moz_PC but in Ko_PC all the .time text collects together at the top of the page, and in IE_Mac the .time text positions relative to the parent div but with other side-effects such as missing list borders and creeping list text.
What are your thoughts guys and girls? Is there a better (clean) way to achieve pseudo tables with complete, clickable row hovers that work in IE? Is there a different/better way to position my psudo-column spans? or does anyone have a workaround for the Konqueror and IE_Mac bugs?