float:left und der IE

[Harlequin]

Hi,

ich versuche gerade von meinen Tabellenlayouts loszukommen, aber irgendwie spielt der IE nicht mit.

Ich habe folgende Konstruktion:

<div class="DisplayArea">
<div class="DisplayCellFloat" style="Width:100%">
<div class="innerDIV">
<div class="BoxTableDesign BoxCellDesign HeadLine">
...Text und Bild...
</div>
<div class="BoxTableDesign BoxCellDesign" style="padding:15px;overflow:auto;">
...verschiedene Divs mit float left und right nebeneinander...
</div>
</div>
</div>

...und das gleiche nochmal aber der 2. innerste Div nur mit &nbsp; als Inhalt

</div> <!--- hier endet der erste DisplayArea Div-->

CSS:
.DisplayArea{
 width:65.3em;
}
.DisplayCellFloat{
 border:none 0px;
 vertical-align:top;
 padding:0px;
 margin:0px;
 float:left;
}
.innerDIV{
 padding-right:1.167em;
 padding-bottom:1.167em;
 padding-left:0px;
 padding-top:0px;
}
.BoxTableDesign {
 border-style:none;
 background-color:#E9EEF5;
}
.BoxCellDesign {
 border:solid 1px #808080;
 border-top:none;
 padding:0px;
 vertical-align:top;
 text-align:center;
}
.HeadLine{
 color:#d40000;
    font-weight:bold;
 border-top:solid 1px #808080;
 padding-left:10px;
 padding-right:10px;
}

Im Firefox sieht alles top aus, aber beim IE wird die zweite Box falsch dargestellt. Unter dem eigentlichen Abschlussrahmen wird die Box fortgesetzt und nochmals mit umrahmt. Als Abhilfe habe ich gefunden, dass ein <span style="clear:both;"></span> zwischen den Boxen hilft, allerdings beendet der mir den Float der einzelnen Boxen, was mir in manchen Fälle im Weg stehen wird, da die Klassen allgemien für mehrere Seiten gelten sollen. Die Versuche den clear:both weiter innen zu benutzen sind fehlgeschlagen, habe auch an allen möglichen Ecken mit overflow:auto/height:1% experimentiert aber ohne Erfolg. Kennt jemand das Problem? Oder muss ich wieder zu Tabellen zurückkehren?

Gruß,

harlequin

PS: ich hoffe ich habe alle relevanten Ausschnitte hier gepostet und bitte nicht über die etwas redundanten CSS-Klassen wundern, die kommen durch den Umbau und sollen noch bereinigt werden, wenn es denn mal ohne Tabellen geht.

[Kalle_B]

du beschreibst ein komplexes graphisches Problem mit vielen, vielen Worten. Dein Problem kommt dabei nicht rüber.

Aber du weisst schon, dass der IE mit
<!--[if IE] ...

besonders hofiert werden möchte?

Wo ist deine Seite zu sehen?

Kalle

[Jesterfox]

du beschreibst ein komplexes graphisches Problem mit vielen, vielen Worten. Dein Problem kommt dabei nicht rüber.

Ich weis ist schwer... die Seite steht aber nirgends online sondern its eine Oberfläche zu einer Webanwendung, an der ich gerade arbeite. Es ist mehr oder weniger so, das die untere Hälfte der 2. Box nochmals wiederholt wird.

+--------+
| Titel1 |
+--------+
| Inhalt |
|        |
+--------+

+--------+
| Titel2 |
+--------+
|        |
|        |
+--------+ (hier sollte Schluss sein)
|        |
+--------+ (das gehört eigentlich nicht mehr hin)

Das ich die großen Boxen mittels float:left anordne liegt daran, das ich auf anderen Seiten auch mal mehrere kleinere Boxen nebeneinander benötige (also nicht 100% breit sondern 2 mal 50% oder so). Das hat bisher auch schon funktioniert, neu ist jetzt, dass ich innerhalb der Boxen wiederum Elemente mit float anordne.

Aber du weisst schon, dass der IE mit
<!--[if IE] ...

besonders hofiert werden möchte?

Ich versuche es soweit wie möglich zu vermeiden. Ich brauch nur den IE6 zu unterstützen und im strict-Mode ist er relativ zahm... Allerdings müsst ich erst mal wissen, wie ich es ihm sagen soll, dann kann ich es evtl. für andere Browser maskieren, wenn es sie stören sollte.

Gruß,

Harlequin