Question

I created a table containing one row and many cells. Each cell contains another table with many rows to have data like image, link etc.

The final result is a form of product pager as seen here:
http://askmeexpress.com/

My problem is that cells apear like rows (vertically instead of horizontally) in browsers other than IE. Please check the link in IE then in Chrome and see the difference.

Answer 1

You set TDs to display as block so they display as such

As per CSS specification Chrome and Firefox display this correctly in separate rows. IE displays it incorrectly as table cells (why am I not surprised?).

So in order for your cells to display correctly in Chrome and Firefox and other proper browsers change your cells’ display style to table-cell rather then block. Or at least as empty string:

$("YourTdSelector").css("display", "");

Or even better don’t use tables for what you’re trying to achieve but rather semantically correct elements. In your case that would be the UL element because you’re displaying a list of something.

Tables should only be used for tabular data in semantic terms to make your pages accessible to those that need it (i.e. screen readers for the blind).