nicht angemeldet
Oft gestelltes rowspan-Problem - keine Lösung gefunden
Hallo,
ich habe bereits etliche Nachrichten zu dem Thema im Forum gefunden, aber bisher keine Lösung sehen können.
Also versuche ich auch einmal mein Glück :-).
Mein Quelltext:
<html>
<head>
<title> .: Neues Design :. </title>
</head>
<body>
<center>
<table border="0" style="width: 800px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 200px; heigth: 33px" bgcolor="#ff553f" nowrap>
<img src="andachten.gif" width="200" height="33">
</td>
<td rowspan="4" align="center" valign="top" style="width: 600px">
Hallo, ihr da draussen!<br><br><br><br><br>
Nun gibt es wieder die Specialausgabe der Homepage<br><br>
Lass es Euch allen gut gehen.<br><br><br><br>
Mit freundlichen Grüßen<br><br><br>
</td>
</tr>
<tr>
<td style="height: 33px; width: 200px" bgcolor="#ff553f" nowrap>
<img src="spiele.gif" width="200" height="33">
</td>
</tr>
<tr>
<td style="height: 33px; width: 200px" bgcolor="#ff553f" nowrap>
<img src="mitarbeiter.gif" width="200" height="33">
</td>
</tr>
<tr>
<td style="height: 100%; width: 200px" bgcolor="#ff553f">
Diese Zeile soll in der Zellenhöhe variabel sein
</td>
</tr>
</table>
</center>
</body>
</html>
Das Problem:
Eigentlich sollte nur die letzte Zeile in der Zellenhöhe variabel sein und die ersten drei Zeilen sollten jeweils fix 33 Pixel hoch sein.
Im Internet Explorer werden jedoch alle 4 linken Zeilen gleich hoch angezeigt.
Wie kann ich dieses Problem beheben? Ich hab schon alles probiert, auch mit style="height: auto" usw. aber nichts will funktionieren!
Vielen Dank schon einmal fürs reine Durchlesen der Nachricht. Ich hoffe, irgendjemandem von Euch fällt ne Lösung ein.
Grüßle
Kevin
-
Hallo Kevin,
mein Vorschlag wäre folgender:
<html>
<head>
<title> .: Neues Design :. </title><style type="text/css">
.hoch { line-height:60px; }
</style></head>
<body>
<center><table border="1" width="800" cellspacing="0" cellpadding="0">
<tr>
<td width="200" heigth="33" bgcolor="#ff553f" nowrap>
<img src="andachten.gif" width="200" height="33" alt="">
</td>
<td rowspan="4" align="center" valign="top" width="600" height="300">
<span class="hoch">Hallo, ihr da draussen!<br>
Nun gibt es wieder die Specialausgabe der Homepage<br>
Lass es Euch allen gut gehen.<br>
Mit freundlichen Grüßen</span>
</td>
</tr>
<tr>
<td height="33" width="200" bgcolor="#ff553f" nowrap>
<img src="spiele.gif" width="200" height="33" alt="">
</td>
</tr>
<tr>
<td height="33" width="200" bgcolor="#ff553f" nowrap>
<img src="mitarbeiter.gif" width="200" height="33" alt="">
</td>
</tr>
<tr>
<td height="201" width="200" bgcolor="#ff553f">
Diese Zeile soll in der Zellenhöhe variabel sein
</td></tr>
</table></center>
</body>
</html>Die letzte Zelle hängt natürlich davon ab, wie hoch die große Zelle mit dem rowspan ist.
Ihre Höhe rechnest du am besten aus, wie oben, also 300-(3*33)=201.
Ansonsten habe ich den style-Mischmasch entfernt, was bei neueren Browsern ebenso gut geht, dazu aber noch kompatibel mit älteren Browsern ist.Grüße
pi
-
Hallo Kevin,
eine brauchbare Lösung wäre auf rowspan zu verzichten und in die
Linke Zelle eine weitere Tabelle zu setzen.
So würde das aussehen:<table border="0" width=800 cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ff553f" nowrap valign=top width=200>
<table border="0" width=200 cellspacing="0" cellpadding="0">
<tr><td height=33><img src="andachten.gif" width="200" height="33"></td></tr>
<tr><td height=33>Text Spalte 2</td></tr>
<tr><td height=33>Text Spalte 3</td></tr>
<tr><td>Beliebiger Text der auch mal mehr Höhe als 33px braucht.
Beliebiger Text der auch mal mehr Höhe als 33px braucht.
Beliebiger Text der auch mal mehr Höhe als 33px braucht.
Beliebiger Text der auch mal mehr Höhe als 33px braucht.
Beliebiger Text der auch mal mehr Höhe als 33px braucht.
Beliebiger Text der auch mal mehr Höhe als 33px braucht. </td></tr>
</table
</td>
<td align="center" valign="top" width=600>
Hallo, ihr da draussen!<br><br><br><br><br>
Nun gibt es wieder die Specialausgabe der Homepage<br><br>
Lass es Euch allen gut gehen.<br><br><br><br>
Mit freundlichen Grüßen<br><br><br>
</td>
</tr>
</table>Viele Gruesse
Herbert