Højdeproblem på table i IE
Jeg har følgende hjemmeside, hvor højden på en <td> ikke virker optimalt i IE (firefox og opera er tip-top): www.red-liv.com/test.htmOg koden:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK REL="SHORTCUT ICON" href="favicon.ico">
<title>Red-Liv.com + Førstehjælpskurser til kørekort</title>
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
td{vertical-align:top;}
td.mid{vertical-align:middle;}
</style>
</head>
<body>
<table align="center" style="height:100%; width:100%;" cellpadding="0" cellspacing="0" border="0"><tr>
<td style="height:160px;width:50%;"></td>
<td rowspan="3" style="height:100%;">
<table width="780" style="height:100%;" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="mid" align="center" width="450" height="160"><i> -Med hjertemassage og kunstigt åndedræt kan man holde et menneske i live ved at erstatte hans egen vejrtrækning og hans hjerteslag.</i></td>
<td><img src="img/dot.gif" width="50" height="160"></td>
<td width="280" height="160"><img src="img/logo.jpg" height="160" width="179"></td>
</tr><tr>
<td class="mid" colspan="3" height="50" width="780" background="img/dot.gif" align="center" valign="middle"><font color="#FFFFFF" size="6">RedLiv - Førstehjælpskurser til kørekort</font></td>
</tr><tr>
<td width="450" style="padding:8px;height:100%;" align="right">
Indhold....<br><br>
<img border="1" src="img/redliv1.jpg">
</td>
<td style="height:100%;background:url(img/dot.gif)"></td>
<td width="280" style="padding:8px;height:100%;">
RedLiv<br><br>
Førstehjælpskurset<br><br>
Kalender<br><br>
Priser<br><br>
Kontakt<br><br>
</td>
</tr></table>
</td>
<td style="height:160px;width:50%;"></td>
</tr><tr>
<td style="height:50px;width:50%;"><img src="img/dot.gif" height="50" width="100%"></td>
<td style="height:50px;width:50%;"><img src="img/dot.gif" height="50" width="100%"></td>
</tr><tr>
<td style="width:50%;height:auto"><img src="img/dotw.gif" style="height:100%;" width="1"></td>
<td style="width:50%;height:auto"><img src="img/dotw.gif" style="height:100%;" width="1"></td>
</tr></table>
</body>
</html>
Som det kan ses, så "knækker" de røde linier ude i siderne i IE. Jeg tror problemet ligger i de sidste <td>'s som ikke "skubber" dem op på plads, men hvis jeg ændrer dem til fx style="width:50%;height:100%;", så virker de i IE, men så opstår samme problem bare i firefox. Der må da være en løsning der tilfredsstiller begge browsere?
Tak for hjælpen!
