problem med td height i ie7

jeg har lavet en tabel:

<table class="lukket">
<tr>
  <td class="kanttl">
  <img src="gfx/tl.gif"></td>
  <td class="kantc" rowspan="3">
  <center>
    <h1>LUKKET!<br>Åbner igen klokken 24</h1></td>
  </center>
  <td class="kanttr">
  <img src="gfx/tr.gif"></td>
</tr>
<tr>
  <td class="kantl"></td>
  <td class="kantr"></td>
</tr>
<tr>
  <td class="kantbl">
  <img src="gfx/bl.gif"></td>
  <td class="kantbr">
  <img src="gfx/br.gif"></td>
</tr>
</table>

med følgende style:

table.lukket {
position: relative;
top: 150px;
width: 400px;
height: 100px;
border-collapse: collapse;
empty-cells: show;
}
td.kanttl {
width: 5px;
height: 5px;
margin: 0px;
padding: 0px;
vertical-align: top;
}
td.kanttr {
width: 5px;
height: 5px;
margin: 0px;
padding: 0px;
vertical-align: top;
}
td.kantl {
width: 5px;
background-image: url(gfx/l.gif);
margin: 0px;
padding: 0px;
vertical-align: top;
}
td.kantc {
background-color: #161616;
border: 0px;
border-bottom: 1px solid #4f4d4d;
border-top: 1px solid #4f4d4d;
vertical-align: top;
}
td.kantr {
width: 5px;
background-image: url(gfx/r.gif);
margin: 0px;
padding: 0px;
vertical-align: top;
}
td.kantbl {
width: 5px;
height: 5px;
margin: 0px;
padding: 0px;
vertical-align: bottom;
}
td.kantbr {
width: 5px;
height: 5px;
margin: 0px;
padding: 0px;
vertical-align: bottom;
}

det virker fint når den ses i ff, men så snart jeg kører den i ie7, laver den de de tre celler i venstre side 33% høje, selv om den øverste og nederst skal være 5px høje. det samme sker i højre side...

http://83.93.59.31/nw/

jeg har ikke ie6, så dem der kan må meget gerne tjekke det i ie6...

men jeg har prøvet diverse ting, og det eneste der hjælper er at sætte højde på kantl og kantr, men det kan jeg ikke bruge, da det skal være et skalerbart design