Forum Moderators: open
I have a test below which shows this behaviour. Two tables are followed by two paragraphs. These appear on separate lines until you start to narrow the browser window. I will list what I see happening in each browser I've tested the code in, because each shows a different result. (Note: all tests were carried out on Windows XP SP2 at 1024 x 768 screen size.)
IE6:
At 870 pixels wide, the second table jumps to the left of the first - but the content is hidden! You can just see the edge of the table. It also appears taller, forcing the first paragraph to lose some text! From an earlier test of this demo, I found the text was also floated left next to the second table, often leading to words breaking up into single letters, which did not have the background colour specified for the paragraphs. In other words, the text was orphaned. The point is, there is no way to access the content of the second table anymore. It's simply off-screen.
Opera 7.54 & 7.6 (Preview 2):
Both browsers follow IE's behaviour, floating the second table next to the first when the window is 849 pixels or less. Worse, you don't even see the second table at all, bar the left border, which overlaps the parent cell. From the border and the gap above the first paragraph it's clear that the table has been made much taller. Text is also lost from the first paragraph.
Firefox:
The clear winner. When the window is reduced to 845 pixels wide, the tables move closer but do not break the layout. At 630 wide, they drop down to touch the paragraphs, but again nothing is broken. From there on, it doesn't matter how narrow the window goes, all the content remains visible. (Below 332 pixels, a horizontal scrollbar appears, meaning the content is again accessible.)
A pity IE6 and Opera do not follow Firefox and keep both tables and paragraphs on view at all times. I tried to correct the problem by adding 'overflow:visible' or ':scroll' to the table, but it had no effect. The only question I have remaining is which browser is following the specs? Does it even matter in this case, so long as the user can see all the content? I find it quite alarming that a whole table can disappear! Only by adding multiple break tags was I able to stop this effect, though there may be other ways. Try the demo and see what you think. Slowly narrow the browser window and see what happens!
<!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" xml:lang="en" lang="en">
<head>
<title>Table Test</title>
<style type="text/css">
p, td {font-family:'Times New Roman',Times,serif;}
p {background:skyblue; font-size:13px;}
table {border:1px solid black; background:pink;}
td {background-color:linen; border:1px solid red; font-size:16px;}
</style>
</head>
<body><table align="left" cellpadding="0" cellspacing="10">
<tr>
<td width="140" rowspan="3"> </td>
<td align="center"><h1>Table Test</h1><br /><table align="left" cellpadding="6" cellspacing="2">
<tr>
<td>ab</td>
<td>cdef ghi jklmn opq rstuv wx yz a</td>
<td>bcd efghi j kl mnop qrstuvwxyz abc</td>
<td>defg hij klm nopqrs tu</td>
<td>v</td>
</tr>
</table><br class="clear" /><br /><br /><table align="left" cellpadding="6" cellspacing="2">
<tr>
<td>ab</td>
<td>cdef ghi jklmn opq rstuv wx yz a</td>
<td>bcd efghi j kl mnop qrstuvwxyz abc</td>
<td>defg hij klm nopqrs tu</td>
<td>v</td>
</tr>
</table><br class="clear" /><br /><br /><p>Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point.</p><p>Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point. Lots of text here to illustrate the point.</p></td>
</tr>
</table></body>
</html>
Update: I solved it by adding 'clear:both' to the paragraphs. This was in the code before (see the class on the break tags?) but got taken out for some reason. D'oh! Now it works as expected.
