IE7 100% Height

**WeakestLink** · Feb 1, 2008 14:42

So I have a 2 Column Table. The bottom of each table I want to fill with a color.
If one column is longer than the other I want that column to be filled with that column color to the bottom.

So I used

Code:

<td style="height=100%;background-color:red;"></td>

This works fine in FF obviously the height is not 100% it might be 5%, 20% whatever is left over really.

In IE7 it adds 100% of the column height. So if I did something like

Code:

<table><tr>
<td style="height=100%;background-color:red;"></td>
</tr><tr>
<td style="height=100%;background-color:red;"></td>
</tr><tr>
<td style="height=100%;background-color:red;"></td>
</tr><tr>
<td style="height=100%;background-color:red;"></td>
</tr></table>

The table height would actually be 400%. This only happens when I set the Document Type too. I was using HTML4 Trans but it seemed to happen if I set any doc type. If I don't set a doc type then it works as I would like. Problem is I want a Doc Type set.

Any help on this?

**Paul O'B** · Feb 1, 2008 15:12

Hi,

As far as I remember (because I don't use tables for layout), I believe IE will only support this deprecated behavior while in quirks mode. I think the only option is to rtip quirks mode with the html 4.01 doctype without uri or add some comments above the doctype which will also trigger quirks mode.

e.g.

Code:

<!--quirks mode on -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{
    height:100&#37;
}
table{height:100%;}
td{vertical-align:top}
.bg{background:red;height:100%;}
</style>
</head>
<body>
<table >
    <tr>
        <td><p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p></td>
        <td>test</td>
    </tr>
    <tr>
        <td class="bg">test</td>
        <td class="bg">&nbsp;</td>
    </tr>
</table>
</body>
</html>

Of course you lose all the benefits of using ie6/7 because they behave more like ie5.5 in this mode. e.g. they will use the broken box model and will forget how to center things with margin:auto.

Can't you get the effect you want with a background image with a faux column effect.

**Paul O'B** · Feb 1, 2008 15:23

Or just use 2 cells but nest your content in each cell.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{
    height:100&#37;
}
table{
    height:100%;
}
td{
    background:red;
    height:100%;
    vertical-align:top;
width:150px;
border-right:5px solid #fff;
}
.content{background:#fff}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td><div class="content">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div></td>
        <td><div class="content">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                    <p>test</p>
                <p>test</p>
                <p>test</p>
            </div></td>
    </tr>
</table>
</body>
</html>

**WeakestLink** · Feb 4, 2008 13:47

The 2 Cell Nested Content works great don't know why I didn't think of that. Thanks for your help.

User Tag List

Thread: IE7 100% Height

Thread Tools

Display

IE7 100% Height

Bookmarks

Bookmarks

Posting Permissions