html and css table not cross browser consistent

[was0564]

The following fiddle is driving me crazy. If I add content to the left column, the right column header loses its height in the amazing Internet Explorer browser. Any ideas?http://jsfiddle.net/P3wBD/HTML:\[code\]<table class="structure"> <tbody> <tr> <td class="left" rowSpan="2"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </td> <td class="header" colSpan="2"> </td> </tr> <tr> <td class="content"> </td> <td class="right"> </td> </tr> </tbody></table>\[/code\]CSS:\[code\]html, body { height: 100%; font-family: "Signika Negative";}.structure { width: 100%; height: 100%;}.structure > tbody > tr:first-child > td:last-child { height: 20px; line-height: 20px; vertical-align: middle;}.structure > tbody > tr > td { padding: 10px;}.structure > tbody > tr > td.left { width: 200px; background-color: #333; padding: 10px 0;}.structure > tbody > tr > td.header { background-color: #f0f0f0; border-bottom: 1px solid #d8d8d8; text-align: right;}.structure > tbody > tr > td.content { border-right: 1px solid #d8d8d8;}.structure > tbody > tr > td.right { width: 300px;}\[/code\]