Table layout wrong in IE(7)

html layout internet-explorer-7 html-table

11,259

Solution 1

I assume you are complaining about the minimal height of the middle row (the one containing only rowspanned cells), and the enlarged height of the adjacent rows to compensate, leaving gaps between the divs.

IE cannot calculate optimal row heights when the row contains only rowspanned cells. The usual solution when you absolutely cannot rejig it to get rid of the rowspan is to add a 1px 'dummy' column to one side of the table, containing empty cells, each with the 'height' set to how high the row should be.

But yes, depending on what you're planning to do with this, a CSS layout may well be more appropriate. If it's really a fixed-pixels-for-everything layout like this example, absolute positioning for each div will be a lot, lot easier.

Other bits: CSS width/height values require units (presumably 'px'); valign/cellspacing/etc. can be more easily done in a stylesheet even if you are using table layouts; a standards-mode DOCTYPE may prevent some of the worse IE bugs (although, not this old, non-CSS-related one).

Solution 2

For a start, your CSS values should have units, e.g. width:190; should be width: 190px;

11,259

Mafti

OutSystems Expert Developer, MVP, Software Engineer, mmorpg-addict

Updated on April 19, 2022

Comments

Mafti about 2 years

Below is the code of a simple html with a table layout. In FF it's looking as I think it should look like, in IE7 it doesn't. what am I doing wrong?

And how can I fix it?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

Bobby Jack over 15 years

Yup, this is almost certainly the cause of the problem, although a more specific description of the problem would help us to determine that.
David Arno over 15 years

Tables should be used to layout tabular data. Anything requiring two or more columns or rows is tabular data...
Bobby Jack over 15 years

"Anything requiring two or more columns or rows is tabular data" that's a dangerous way of putting it, David!
David Arno over 15 years

I'm a believer in using tables to get 2-3 column layouts. I am aware that most people don't like hearing this though and view my position on tables as wrong at best and dangerous at worst. A look at the negative feedback I get at times has taught me how bad the hatred of tables has become.