IE < V.7 - Problem mit DIV-Containern

[Calvinstefan]

Hallo Leute,

bin ein bisschen am Verzweifeln, weil nach stundenlangem hin- und herprobieren es immer noch nicht so recht klappen will ...

OK: "Reset und ab ins Forum" hab ich mir jetzt gedacht ... und da bin ich.

Folgendes Problem:

Auf unserer Vereinsseite soll es eine Kurzübersicht der tt_news-Artikel geben. In den Browsern der neueren Generation sieht alles OK aus:

Bild entfernt

Doch ältere Browser stellen das ganze so dar:

Bild entfernt

Klarer Fall, es gibt ein Problem mit dem floating der Container. Aber trotz "schlauem Buch" und Google ... nix hilft.

Hier mal mein letzter HTML-Code hierzu:

<!-- ###TEMPLATE_LIST### begin -->


<div class="shortlist_outer_wrap">

<!-- ###CONTENT### begin -->
<!-- ###NEWS### begin -->

  <div class="shortlist_inner_content">
	
    <div class="shortlist_content">
    	<div class="shortlist_date"><strong>###NEWS_DATE###</strong></div>
        <div class="shortlist_image_wrap">
		<div class="shortlist_image">###NEWS_IMAGE###</div>
	</div>

		###NEWS_TITLE###
		<!--###LINK_ITEM###-->###MORE###<!--###LINK_ITEM###-->

	<div class="shortlist_clear"></div>

    </div>
   
  </div>
  
<!-- ###NEWS### end-->
<!-- ###CONTENT###  end -->

</div>

<!-- ###TEMPLATE_LIST### end -->

Und hier der letzte zugehörige CSS-Code:

.shortlist_content {
	overflow: hidden;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ACACAC;
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #C1C1C1;
	margin-top: 10px;
	background-color: #F6F6F6;
	padding-right: 2px;
	padding-left: 5px;
}

.shortlist_image_wrap {
	float: right;
	margin: 2px;
	padding: 3px;
	border-style: solid;
	border-color: #CCCCCC;
	border-width: 1px;
	background-color: #FFFFFF;
}

/*.shortlist_image {
	width: 80px;
	highth: 80px;
}*/

.shortlist_date {
	margin-bottom: 5px;
}

.shortlist_clear {
	height: 1%;
	overflow: hidden;
}

Bitte, könnt ihr mir sagen, wie ich das offensichtliche Problem behebe?? Wo liegt in meinem HTML oder CSS der Fehler?? ... Wie würden es die Profis machen??

Danke Euch vielmals!!

Ciao,

Stefan.

[barney]

Gib in der CSS mal dem ".shortlist_clear" ein "clear: both;" mit.

[Calvinstefan]

Hallo barney,

das Ergebnis sieht so aus:

Bild entfernt

Nicht ganz, was ich mir erhofft hatte ...

Muss ich den Clear-Container vielleicht an einer anderen Stelle platzieren?

Ciao,

Stefan.

[barney]

Ja, probier mal den clear - Container an verschiedenen Positionen ... versuchs mal nach dem </div> von .shortlist_inner_content, also vor dem Marker <!-- ###NEWS### end-->

Gruß

[Calvinstefan]

... langsam kommen wir der Sache näher!

Bild entfernt

Warum überlappt das Bild den Hauptcontainer? Und wird nicht von ihm umschlossen??

[Calvinstefan]

Guten Morgen.

So, mir hatte es jetzt gereicht. Ich hab das HTML- und CSS-Skript einfach neu geschrieben. Erfolg? ... nicht wirklich:

Bild entfernt

IE6:

- der erste und dritte News-Frame ist zu weit nach links verschoben
- die Bilder fehlen

IE 7:

- wie beim IE 6 sind die Frames verschoben

IE 8:

- so sollte es aussehen!

Ich bin echt am Verzweifeln!!
Ich vermute, dass das Problem nicht alleine von meinem tt_news-Template herrührt, sondern dass mein Haupttemplate nicht IE 6 / 7 - konform ist.

Falls jemand Lust hat: link entfernt
... hier steht der Patient. Ich wär Euch echt dankbar, wenn mir jemand sagen könnte, wo mein Fehler liegt.

Danke!

Ciao,

Stefan.

[Calvinstefan]

OK, soweit hab ich's doch noch zwei Tage hin- und herprobieren doch noch hinbekommen. Durch eine Mischung von Clearfix durch einen neuen Container, clear:both, width: xxpx, undundund hat es jetzt funktioniert.

Dennoch vielen Dank für die Antworten!

Schönes WE!

Ciao,

Stefan.