HTML Table columns height; Works in Firefox not in IE

StackOverflow https://stackoverflow.com/questions/250931

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">&nbsp;</td>
        <td valign="top" bgcolor="#112233">&nbsp;</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...

alt text

EDIT: added the HTML doc type to the code snippit. Added a screenshot.

Any help appreciated, thanks :)

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top