Forum Moderators: open
I am building this site in Firefox 3.0 on a PC. On the site, typically the tables loads fine across all browsers (I have been testing IE6, IE7 and IE8).
However, sometimes, in Firefox, I'll refresh the page and the table rows will be broken in many different places, dropping down below where they should be. In Firebug I can see that they are still within their proper rows, but the row has just grown in height since the cells are stacked. The columns cease to exist and it looks like a bunch of bricks stacked at random on top of each other.
The content for the cells is generated dynamically from a database. I have a feeling that this is causing my problem, and that the content or table structure isn't loading at the proper time.
I also put divs inside of each cell because it seemed like the only way to really control the widths of the cells when the content changes without a page reload due to some jquery functions (I have removed the jquery to rule out this not being the source of the problem).
All the table styles are CSS based. Perhaps I need to define them using HTML table parameters like "col" to make them more stable? Any ideas would be greatly appreciated.
DocType:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
My CSS:
table#job-chart{
width:826px;
border-collapse:collapse;
text-align:left;
}
table#job-chart tr{
display:block;
}
table#job-chart td{
display:table-cell;
}
table#job-chart td, table#job-chart th{
border:3px solid #c2c1c0;
padding:10px;
}
table#job-chart th{
padding:10px;
vertical-align:middle;
height:31px;
}
td.company div, th.company div{
width:80px;
}
td.location div{
width:82px;
}
th.location div{
width:102px;
}
td.department div, th.department div{
width:80px;
}
td.title div, th.title div{
width:101px;
}
td.reports div, th.reports div{
width:70px;
}
td.experience div, th.experience div{
width:55px;
}
td.desc div, th.desc div{
width:197px;
}
HTML (shortened the table by a few rows, but they are identical, just different content, dynamically populated):
<table id="job-chart" class="highlight">
<tr>
<th class="company"><div>Company</div></th>
<th id="filter" class="location"> <div>Location</div></th>
<th class="department"><div>Department</div></th>
<th class="title"><div>Title</div></th>
<th class="reports"><div>Reports To</div></th>
<th class="experience"><div>Experience</div></th>
<th class="desc"><div>Description</div></th>
</tr>
<tr class="canada list">
<td class="company"><div>Company Foo</div></td>
<td class="location"><div>Toronto, Ontario</div></td>
<td class="department"><div>Technology</div></td>
<td class="title"><div>Multimedia / Web Designer</div></td>
<td class="reports"><div>Director of Foo</div></td>
<td class="experience"><div>4+</div></td>
<td class="desc">
<div>This is some text in the div[...]</div>
</td>
</tr>
</table>
[edited by: incrediBILL at 8:15 pm (utc) on June 28, 2009]
[edit reason] removed specifics [/edit]
Secondly is your XHTML code valid? All I see is some CSS and HTML...but not a minimal test case (which includes the XML declaration down to </html>). If it's not valid then of course it won't render as desired in competent browsers. You should never test IE first, write standards compliant code, test in Gecko, Presto, and WebKit, validate, and when it renders as desired then test it with Trident and use conditional comments to adjust the rendering.
- John
[edited by: JAB_Creations at 4:15 am (utc) on June 30, 2009]
I actually figured out what was going on. The issue only occurred during slow connections, and the table cells were always in different places. I came to the conclusion that the database information was coming in at a slightly different time than the table was rendering. After googling for a bit, I narrowed it down to a table rendering reflow type bug, where the table was not able to render itself around the elements in the proper order.
I used this javascript to solve it. It basically forces a reflow on the elements. My problem was solved.
<style type="text/css">
.reflow { display: none; }
</style>
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
var bodyClass = body.className;
body.className = "reflow";
setTimeout(function() { body.className = bodyClass; }, 1);
</script>
It's not only table structures that are affected by a long way. Any unneccesary mark-up depth into the DOM can create trouble. See Minimizing Browser Reflow [code.google.com] for a cool chart about differnt mark-up and the reflow "tax" it requires.
However have you considered all of the table's elements?
Here is how I used tables in the rare circumstances I encounter tabular data...
<table summary="This table contains nutritional information">
<colgroup style="width: 25%;"></colgroup>
<colgroup style="width: 25%;"></colgroup>
<colgroup style="width: 25%;"></colgroup>
<colgroup style="width: 25%;"></colgroup>
<thead><tr><td>header 1</td><td>header 2</td><td>header 3</td><td>header 4</td></tr></thead>
<tfoot><tr><td>header 1</td><td>header 2</td><td>header 3</td><td>header 4</td></tr></tfoot>
<tbody>
<tr><th colspan="4"><span>Sub-Header</span></th></tr>
<tr><td>example a1</td><td>example a2</td></tr>
<tr><td>example b1</td><td>example b2</td></tr>
<tr><td>example c1</td><td>example c2</td></tr>
</tbody>
<tr><th colspan="4"><span>Sub-Header</span></th></tr>
<tr><td>example e1</td><td>example e2</td></tr>
<tr><td>example f1</td><td>example f2</td></tr>
<tr><td>example g1</td><td>example g2</td></tr>
<tr><td>example h1</td><td>example h2</td></tr>
</tbody>
</table>
I've read that you're supposed to have (and this table should validate) tfoot element just after the thead element though before the tbody element and that it aids with initial rendering. I can't cite a source though I remember reading this somewhere.
Thanks Ted for the links in regards to reflow. I think reflow will become decreasingly less provaliant once websites stop acting like websites and start acting like applications.
- John
[edited by: JAB_Creations at 6:56 am (utc) on June 30, 2009]
