A web developer’s work is never done, assuming the web developer is prepared to work on any conceivable web project and there are more project vacancies than web developers to fill them. In my case, that means I have been working on a web project since I last blogged about creating test cases for bugs found in web pages. In this latest project, I have found yet another bug in Firefox, or rather another way to trigger the reflow problem. Unfortunately, unlike the previous case, this one could not be fixed by simply specifying widths; indeed, the problem occurred because widths were specified. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Bug
</title><style type="text/css">table {
border: 1px solid black;
}
.curtain {
background-color: red;
width: 30px;
}
</style></head><body><table cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="curtain"> </td> <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</td> <td class="curtain"> </td> </tr> </tbody></table><br /><table cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="curtain"> </td> <td><table width="100%"><tr><td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</td></tr></table> </td> <td><table width="100%"><tr><td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</td></tr></table> </td> <td class="curtain"> </td> </tr> <!— Removing the following tr makes the page render correctly —> <tr> <td colspan="2" width="50%"/> <td colspan="2" width="50%"/> </tr> </tbody></table></body></html>
The page consists of an example table at the top for reference, and then another table which is similar but is rendered incorrectly on Firefox. To get a sense of how bad the problem is, try slowly changing the width of the window and watching the red “curtains” jerk wildly in size. This behaviour does not seem to be due to the second table being split into two columns, but instead due to the code specifying that the first two columns collectively and the second two columns collectively each have 50% width.
I believe that Internet Explorer 6 and Firefox 3 both render this correctly, which suggests it is in no way an intended feature. I can imagine that in the absence of a workaround, a developer whose site was affected would be left with the difficult choice of rewriting a large portion of their design or just hoping that Firefox users didn’t get too annoyed. To make matters worse, as with all reflow bugs, the precise behaviour (and even the presence of the bug at all) can change based on the amount of text on the page and the width of the user’s screen, making it hard to reliably detect while designing. The only mitigating factor (apart from the fact that Firefox 2 will be phased out eventually) is that this particular bug seems to rely on nested tables, which should be avoided for other reasons. Avoiding them altogether is hard, though, I admit, particularly if you want your page to have that popular rounded corners look. I await CSS3 getting its act together and becoming an official recommendation, since it is likely to include a way of specifying that the browser apply these rounded corners without using hacks.
In the meantime, does anyone out there have a workaround for this bug?
