Wedgy: Layout-Problem im IE6

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>

  1. hi,

    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.

    Du solltest aber stattdessen CSS benutzen - float.

    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.

    Pfui bah, nein, das ist überhaupt nicht naheliegend.
    Eine Überschrift als Überschrift auszuzeichnen, wäre naheliegend.
    Wenn du noch ein weiteres Element für gesonderte Formatierung brauchst, könnte man noch einen Span hineinschachteln.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hi,

    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.

    Naheliegend ist eine vernünftige Struktur zu wählen und den Rest ggf. mit Hintergrundgrafiken zu lösen. Tabellenverschachtelungen zur Bordererzeugung ist definetiv out.

    Gruesse, Joachim

    --
    Am Ende wird alles gut.