<img> in <table> wird (nur) vom IE6 seltsam angeordnet
Silberengel
- html
0 xjs
hallo!
ich habe ein kleines problem:
im navigationsbereich einer "xhtml 1.0-transitional"-hp, an der ich arbeite, befindet sich eine tabelle, die sich so liest:
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" width="424" height="118" valign="middle" align="center">
<img src="../gfx/ssc_logo_fixedsize.png" alt="Soundscapes Show- und Medientechnik" width="400" height="81" />
</td>
<td height="103" valign="middle" align="center">
<u><b>hier</b> gehört ne headline hin....</u>
</td>
</tr>
<tr>
<td height="15" valign="middle" align="center">
<!--freiraum-->
</td>
</tr>
<tr>
<td colspan="2" valign="middle" align="center">
<img src="../gfx/h_line_grey.jpg" alt="Linie oben" height="2" width="100%" />
</td>
</tr>
</table>
das problem ist nun, daß alle fast browser (opera, netscape, firefox) die anordnung richtig darstellen (logo links über zwei rows, daneben die zwei betroffenen rows mit inhalt und unter allem die letzte mit einer linie). nur der IE muss sich ne extrawurst braten und erweitert die letzte row eigenmächtig auf ~20px hööhe, da er oberhalb der beinhalteten grafik einen ~15px großen rand darstellt. habs auch schon mit borders="0" und mit td height="2" versucht... kann man dem IE so ein verhalten abgewöhnen? so schmeißt der mir die gesamte seitenoptik zusammen...
danke
SE
Hi!
Ich sehe _mit_ der row, in der das Logo ist, nur drei Rows. Wie also soll es gehen,
(logo (in einer Zelle innerhalb einer Row) links über zwei rows, daneben die zwei betroffenen rows mit inhalt und unter allem die letzte mit einer linie)
darzustellen, das gibt zusammengezählt nämlich 4 Rows?
ciao,
xjs
Hi und danke für die Antwort erstmal!
Ich sehe _mit_ der row, in der das Logo ist, nur drei Rows. Wie also soll es gehen,
(logo (in einer Zelle innerhalb einer Row) links über zwei rows, daneben die zwei betroffenen rows mit inhalt und unter allem die letzte mit einer linie)
darzustellen, das gibt zusammengezählt nämlich 4 Rows?
es sind drei rows, wobei die oberste in zwei td's geteilt ist (eine mit logo, eine mit text), die folgende ist nur ein td und die unterste auch. allerdings kann da der hase im pfeffer liegen, da das logo ne rowspan von 2 hat und die zweite row ja nicht aus zwei, sondern nur der einen (leeren) td besteht. ich tests mal.
hat sonst jemand eine erklärung zu der darstellung des bilds? wie gesagt, alle browser ausser dem IE stellen das auch wirklich nur 2px breit dar, nur der IE zieht oben ~15px und unten ~2px rand um das teil - auch wenn ich sie ganz allein auf eine leere seite stelle.
merci
SE
okay, problem gelöst.
der IE interpretiert eine syntaktische kleinigkeit anders als alle anderen:
[HTML]
<td colspan="2" valign="middle" align="center">
<img src="../gfx/h_line_grey.jpg" alt="Linie oben" height="2" width="100%" />
</td>
[/HTML]
führt zu der beschriebenen (zu großen) zelle von 20px höhe, in der die liniengrafik angeordnet wird wie gewünscht.
[HTML]
<td colspan="2" valign="middle" align="center"><img src="../gfx/h_line_grey.jpg" alt="Linie oben" height="2" width="100%" /></td>
[/HTML]
(also in einer zeile geschrieben) führt zu einer 2px hohen zelle, in der die grafik wie gewünscht erscheint.
der IE interpretiert also wohl die {enter} innerhalb des von <td></td> umschlossenen raums als gewollte zeilenumbrüche im tabellenfeld. nicht schön für ordentliche coden....aber was solls