Hallo!
Ich hab eine Tabellenzelle (oder ein anderes Elternelement, im Prinzip egal), und ich möchte in diesem Element auf der rechten Seite ein Bild. Links daneben soll die Überschrift, darunter Text der das Bild in weiterer Folge umfließen soll. Im Prinzip einfach, wenn man align='right' im Bild benutzt.
Ich möchte aber für die Überschrift eine besondere Formatierung, und zwar soll die Überschrift umrahmt sein. In der rechten unteren Ecke soll sich die waagrechte Rahmenlinie fortsetzen bis neben das Bild.
Naheliegend ist also, für die Überschrift eine Tabelle zu basteln, die aus zwei Zellen besteht: Die eine ist ganz umrahmt, die daneben hat nur eine Linie unten.
Funktioniert im Firefox wunderbar, der IE meint aber, diese Überschriften-Tabelle über das Bild drübermalen zu müssen, weil doch 'width=95%' für diese Tabelle angegeben ist. Das Bild ist aber unterschiedlich breit und ich möchte, daß das immer funktioniert, auch im IE. Hat jemand einen Vorschlag, wie ich das hinbekomme?
Skizze (Firefox, so solls aussehen)
+--------------------------------------------+
| +------------------+ +---------------++
| | Überschrift | | ||
| +------------------+----- | Bild ||
| | ||
| +---------------+|
| |
+--------------------------------------------+
Das macht der IE:
+--------------------------------------------+
| +------------------+ +---------------++
| | Überschrift | | Bild ||
| +------------------+------+---------------||
| | ||
| +---------------+|
| |
+--------------------------------------------+
Code:
(...)
<td style='vertical-align: top;'>
<img src='./gfx/image.gif' align='right' />
<table style='border-collapse: collapse; margin: 10px; width: 95%;'>
<tr>
<td nowrap='nowrap' style='border: 1px solid white; padding: 5px; font-weight: bold; font-size: 12px; font-family: Verdana; color: white; width: 10%; '>
Überschrift
</td>
<td style='border-bottom: 1px solid white; padding: 5px; font-weight: bold; font-size: 12px; font-family: Verdana; '>
</td>
</tr>
</table>
</td>