HTML Table columns height; Works in Firefox not in IE
-
05-07-2019 - |
Question
I have some HTML that displays fine on FireFox3/Opera/Safari but not with IE7. The snippet is as follows:
<!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></head>
<body bgcolor="#AA5566" >
<table width="100%">
<tr>
<td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>
<td width="600" rowspan="2" >
<table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
</td>
<td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>
</tr>
<!-- This row doesnt fill the vertical space on IE7 //-->
<tr>
<td valign="top" bgcolor="#112233"> </td>
<td valign="top" bgcolor="#112233"> </td>
</tr>
</table>
</body>
The second row wont fill the vertical space created by the first rows middle column (notice the rowspan="2") correctly. Instead the first rows 1st and 3rd columns expand down even though I set their height to 37. The image below shows what happens in IE7 and Firefox3...
EDIT: added the HTML doc type to the code snippit. Added a screenshot.
Any help appreciated, thanks :)
Solution
What if you try it like this:
<!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></head>
<body bgcolor="#AA5566" >
<table width="100%" border='1'>
<tr>
<td valign="top">
<table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
<td width="600" rowspan="2" >
<table width="600" height="800"><tr><td>asdf</td></tr></table>
</td>
<td valign="top">
<table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
</tr>
</table>
</body>
OTHER TIPS
The right answer would be: don't layout your page using tables.
The technical answer would be: your table cells are doing what they are supposed to do, i.e. you can't solve your problem with the code structure you use.
The hacky answer would be: having the cells on the left and right to be exactly 37px high, you'll have to add 2 additional nested tables in the left and right cell.
I'm not quite sure why that is happening. What layout are you trying to achieve, does it really need to be a table? You shouldn't layout pages with tables, they should only be used for true tabular data.
Have you considered using divs?
Throw it through a validator and I'm sure you'll get a little closer.
Actually - what you're seeing is normal behavour for IE: add border="1" to your main table and it'll show you what's happening a little clearer.