table height not 100% in IE7 but it works in FF3.6

Question

In this page, the height of the payment method area is shorter than the height of the parent element in IE7.

How can I fix this Do I have to apply shading to the parent element - a table cell - instead of the table?

This is the page: https://checkout.netsuite.com/s.nl?c=659197&sc=4&whence=

This is the login info:

• email: [email protected]
• pass: test03

Here is the relevant row of HTML (the table structure is controlled by the hosting/CMS provider so I can only change it with javascript):

<tr>
<td width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" id="shippingmethodtable">
<tbody><tr>
<td class="smalltext"><b>Shipping Method</b></td>
</tr>
<tr>
<td class="smalltext">
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr><td class="smalltext">shipping methods are listed in here</td></tr>
<input type="hidden" value="T" name="continueclicked">
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td width="50%">
<table cellspacing="0" cellpadding="0" border="0" id="paymentmethodtable">
<tbody><tr>
<td class="smalltext"><b>Payment Method</b></td>
</tr>
<tr>
<td class="smalltext">(none selected)</td>
</tr>
</tbody></table>
</td>
</tr>

'

This is the relevant CSS:

body.checkout #submitordertable td {
height:100%;
}
body.checkout #shippingaddress, body.checkout #billingaddress, body.checkout #shippingmethodtable, body.checkout #paymentmethodtable {
height:100%;
width:100%;
}

Answer 1

Try adding:

position: fixed;

in your style definition.