✔ IE: Zeilenumbruch zwischen div-Bereichen verhindern

[qwerty12309]

Ich habe eine Tabelle mit 4 Spalten, die jeweils noch div-Bereiche mit unterschiedlichen Elementen enthalten.
In Spalte 1 liegen zwei divs, das erste ist ein Bild, das zweite ein Text. Wenn der Text zu lang ist, soll er in die zweite Spalte hineinragen.
Im Firefox und Opera klappt es mit "overflow: visible; white-space: nowrap", aber im Internet Explorer rutscht der Text unter das Bild und verbreitert die erste Spalte bis der ganze Text hineinpasst.
Was kann ich dagegen tun?

Der relevante Quelltext:

<tr id="result0">
<td class="Spalte">
<div class="resultNameImage" style="background: transparent url(bild.jpg) no-repeat scroll 0%;"/>
<div class="resultNameBody">
	<div class="resultNameTitle" style="overflow: visible; white-space: nowrap;">Ueberschrift, die in die zweite Spalte ragen soll</div>
	<div class="resultLink"><a href="...">Textfortsetzung</a></div>
</div>
</div>
</td>
<td class="Spalte">
<div> Inhalt von Spalte 2
</div>
</td>
...
</tr>

und das CSS dazu:

table.resultTable {
        background-color: #E2E2E2;
        padding:          0px;
        border-collapse:  collapse;
        width:            100%;
}

td.Spalte {
        background-image:  url(e2e2e2_sml.gif);
        background-repeat: repeat-x;
}

div.resultLink {
        background-image:    url('default.png');
        background-repeat:   no-repeat;
        background-position: 0% 60%;
        padding-left:        12px;
}
div.resultNameBody {
        position: relative;
        float:    left;
        left:     5px;
        cursor:   pointer;
}

div.resultNameImage {
        background:                    transparent scroll 1px;
        background-repeat:             no-repeat;
        position:                      relative;
        float:                         left;
        margin-top:                    5px;
        -moz-background-clip:          -moz-initial;
        -moz-background-origin:        -moz-initial;
        -moz-background-inline-policy: -moz-initial;
        width:                         42px;
        height:                        42px;
}
div.resultNameTitle {
        color:       #214369;
        font-weight: bold;
        font-size:   11pt;
        overflow:    hidden;
        width:       220px;
        height:      18px;
}

Ich habe bereits versucht, mit z-index den Text auf 3 zu setzen, waehrend ich das Bild auf 2 und Spalte2 auf 1 gesetzt hatte.
display:inline hilft nicht, und eine feste Position anzugeben funktioniert auch nicht, dann ist zwar der Text an der richtigen Stelle, aber der Text der darunterliegenden Zeile rutscht nach, sodass zwei Datensaetze in einer Zeile stehen.
Ich hoffe sehr auf eure Hilfe

 

[Maik]

Hi,

versuch es mal mit einer absoluten Positionierung für das DIV .resultNameBody:

div.resultNameBody {
        position: absolute;
        float:    left;
        left:     5px;
        cursor:   pointer;
}

 

[qwerty12309]

Danke fuer den Rat,
wenn ich es mit einer absoluten Positionierung versuche, bekomme ich einen Buchstabenhaufen, da es alle Ergebnisreihen auf eine Position zu legen versucht.

Ich habe die Ursache jetzt gefunden: Natuerlich ist es wieder ein Internet Explorer-Bug.
Habe mit Spucke eine Loesung zusammengeschrieben:

div.resultNameTitle {
        color:       #214369;
        font-weight: bold;
        font-size:   11pt;
        overflow:    visible;
        white-space: normal;
        width:       220px;
        height:      18px;
}

div.resultNameBody>div.resultNameTitle {
        white-space: nowrap;
}

Der IE <7 bricht den Text nun innerhalb der ersten Spalte um, alle anderen Browser zeigen den Text als Ueberhang an