No replies
roytheboy's picture
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

I need to show some simple tabular data in a pure XHTML/CSS website, so I thought I'd use a table. The thing is, I would like each complete row to be a clickable link with a background hover, just like the now-standard vertical, li-based CSS navigation menus. This is easily doable with javascript or by using a <tr> rollover, but of course IE does not support the hover on anything other than an anchor tag and I like everything I do to work with javascript disabled.

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:

.time {
position: absolute;
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?

Life's a b*tch and then you die!