How can I get the rows in the left side of this table to appear in IE the same as they appear in Firefox? In Firefox the rows on the left are only as tall as the text within them, with the last row taking up the white space. In IE they all spread out. The problem only occurs when the content in the right column exceeds the left column considerably. Column heights don't seem to help. <body> <table width="652" border="1" cellpadding="2" cellspacing="0"> <tr> <td width="322" height="20" valign="top" class="sidebarHeader"><p><span class="style1">Text 1</span></p></td> <td width="5" rowspan="6" valign="top" class="sidebarHeader"> </td> <td width="340" rowspan="6" valign="top" class="sidebarHeader"><p>This is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of text</p> </td> </tr> <tr> <td width="322" height="20" valign="top" class="bodyText style1"> </td> </tr> <tr> <td width="322" height="20" valign="top" class="bodyText style1"><p class="style2">Text 2</p></td> </tr> <tr> <td width="322" height="20" valign="top" class="bodyText style1"><p><span class="style4">Text 3</span></p></td> </tr> <tr> <td valign="top" height="20" class="bodyText style1"><p>Text 4</p></td> </tr> <tr> <td width="322" valign="top" class="bodyText style1"> </td> </tr> </table> </body>
1. Ditch cellpadding/cellspacing/border attributes (set them to 0) 2. table { border-collapse:collapse; } table td { padding:value; } 3. * { margin:0; padding:0; } at the top of stylesheet Although I would drop this whole thing and not use tables for layout.
Still can't fix it. See this in IE vs. Firefox: <!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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- * { list-style: disc; margin:0; padding:0; } } .style1 { color: #CC3300 } .style2 {color: #000000} .style4 { color: #CC3300; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: bold; } body { margin:0px; background-color: #C0C0C0; } td { font:11px arial; color:#99CCFF; } table { border-collapse:collapse; } --> </style> </head> <body><table width="652"> <tr> <td width="322" height="20" valign="top" class="sidebarHeader"><p><span class="style1">Text 1</span></p></td> <td width="5" rowspan="6" valign="top" class="sidebarHeader"> </td> <td width="340" rowspan="6" valign="top" class="sidebarHeader"><p>This is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of textThis is a lot of text</p> </td> </tr> <tr> <td width="322" height="20" valign="top" class="bodyText style1"> </td> </tr> <tr> <td width="322" height="20" valign="top" class="bodyText style1"><p class="style2">Text 2</p></td> </tr> <tr> <td width="322" height="20" valign="top" class="bodyText style1"><p><span class="style4">Text 3</span></p></td> </tr> <tr> <td valign="top" height="20" class="bodyText style1"><p>Text 4</p></td> </tr> <tr> <td width="322" valign="top" class="bodyText style1"> </td> </tr> </table> </body> </html>
Remove the height="" attributes. I believe Firefox treats it literally (as it was meant to be) and makes it 20 of whatever unit max, while IE probably treats it as min.
Test this in IE. the rows are all spread out on the left side. I'd prefer they be jammed up together as tight as the text allows.