Question

I have a dynamically generated table in my page, which was generated by a 3rd party source (its an MLS feed) with 10 rows, 5 columns. I can’t request much else. I want to display it as ONE column, hence, like a list. I have managed to do this on Firefox, Safari, and Chrome, but when I work with it in IE, the two effects I get are: each TD element in each row overlaps like a hand of cards in poker while maintaining the TR spacing – OR – it will stack the TDs AND the TRs all into one pile of IE crap. Finally, nothing I do in CSS seems to change my table’s width or TD width. o.O. Commencing hair removal tactics.

Page example:
http://www.vdbestates.com/beta/residential.html (view in Firefox and IE for best illustration)

Html:

<table id="IDX-showcaseWrapper-residentialListings" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
    <tbody>
        <tr style="z-index: -1;">
            <td class="IDX-showcaseDetails" valign="top" style="text-align: center; padding: 0px 0px 8px;"></td>
            <td class="IDX-showcaseDetails" valign="top" style="text-align: center; padding: 0px 0px 8px;"></td>
            <td class="IDX-showcaseDetails" valign="top" style="text-align: center; padding: 0px 0px 8px;"></td>
            <td class="IDX-showcaseDetails" valign="top" style="text-align: center; padding: 0px 0px 8px;"></td>
            <td class="IDX-showcaseDetails" valign="top" style="text-align: center; padding: 0px 0px 8px;"></td>
        </tr>
        <tr style="z-index: -1;"></tr>
            ...
        <tr style="height: auto; z-index: -1;"></tr>
    </tbody>
</table>

I am using jQuery to dynamically assign new “top” values to the TDs in the other browsers, using a for loop, multiplying the index by the TD height:

var tCell;
for(var i = 0; i < size; i++) {
    tCell = $('td.IDX-showcaseDetails').eq(i);
    $(tCell).attr('style', 'top:' + (i * 250) + 'px;');     
}

CSS:
(all browsers)

table[id^=IDX-showcaseWrapper] {
    position:relative;
    min-height:1200px !important;
    padding-bottom:20px;
    z-index:1;
    display:block;
}
table[id^=IDX-showcaseWrapper] tr {
    position:relative;
}
.IDX-showcaseDetails {
    display:list-item !important;
    list-style-type:none;
    width:480px;
    height:275px;
    position:relative;
    clear:both;
    border-bottom:1px solid #5c4a57;
    margin-bottom:15px;
    padding:0px;
    z-index:1;
}

Answer 1

Why not read your data out of the table, re-write it into a list, then remove the table? Messing around with CSS to emulate this will surely drive you mad. Use JavaScript instead.