[CSS] wieder mal macht der IE Ärger

[Timo Trallala]

Hallo Gemeinde,

es geht im folgenden um ein News-archiv, welches dynamisch aus einer DB generiert wird. Zu Anschaungszwecken hab ich mal einen
Beitrag hardcodiert. In allen gängingen Browsern macht mir die
darstellung keine Probleme, ausser der im titel angeführte IE. Hoffe
jemand weiss rat!

<div class = "fullpost">
 <h3>Martin hängt schoner an den Nagel</h3>

 <div class = "dateline">
  Tue , 27th Feb 2007 11:02:27 AM by Timo Trallala
 </div>

 <div class = "news_text">
  <span class = "right"><img src = "img/userfiles/timo%20trallala/Image_1119648887.jpg" title = "Eule Und Turmwirt"
                             alt = "">

  <p class = "subtitle">
  Eule und der Turmwirt im Huebis</p>

  </span>Seit Jahren begab sich dasselbe Spiel: 'Ich brauch das nicht mehr und höre nach der Saison auf'. Trotzallem
  freuten wir im wieder, dass es doch noch weiterging.

  <br>
  ...
 </div>
</div>

css

/* ######################################################################################################
** ### DIV-Container Newsarchiv        ##################################################################
** ######################################################################################################
*/
#divShowNewsPreview {
	margin: 0 0 0 10px;
	text-align: left;
}
#divShowNewsPreview .fullpost {
	overflow: hidden;
	margin: 10px 0 0px;
	display: block;
	padding: 5px;
	border: 1px #333 ridge;
}
#divShowNewsPreview .dateline {
	font-style: italic;
	margin-top: 5px;
	margin-bottom: 1em;
	text-align: right;
}
#divShowNewsPreview  .news_text {
   text-align:left;
	text-align:justify;
	font: normal 13px/18px Verdana, Arial, Helvetica, sans-serif;
	margin: 10px 0 5px;
	
}
#divShowNewsPreview  .news_text img {
	border: none;
	margin: 0;
	padding:0;
	border-bottom: 1px black solid;
	display: block;
}
#divShowNewsPreview  .news_text .right{
	float: right;
	margin: 5px 0 0 20px;
	padding:0;
	border:1px black solid;
	text-align:center;
}
#divShowNewsPreview  .news_text .left {
	float: left;
	margin: 5px 20px 0 0;
	padding:0;
	border:1px black solid;
	text-align:center;
}
#divShowNewsPreview  .news_text .subtitle {
	text-align:center;
	font: italic 11px/14px Verdana, Arial, Helvetica, sans-serif;
	padding: 5px 0 5px;
}

Anbei noch 2 gifs!

Über Hinweise, die zur Ergreifung des Problems führen, wäre ich sehr erfreut

Gruß
derTallala

[wahsaga]

Re: [CSS] wieder mal macht der IE Ärger

Du erstellst ungültigen HTML-Code - und wunderst dich dann, wenn's nicht wie gewünscht angezeigt wird?

Solltest doch auch du langsam begriffen haben, dass die Herstellung validierenden Codes als allererstes kommt. Erst danach werden Darstellungsprobleme betrachtet.

[jahlives]

Also wenn du mit Problem meinst, dass das Bild über den div hinausläuft, dann würde ich mal sagen Works as Designed ! Divs legen ihre Grösse immer anhand des Inhalts an. Als Inhalt kann ein div aber nur das "sehen" was im Dokumentfluss hängt. Ein gefloateter Inhalt ist eben ausserhalb des Dokumentsflusses und hat daher keinen Einfluss auf ein umgebendes Div (dein img ist ja rechts floatend)
Das Problem dürfte verschwinden wenn du mehr Texthöhe als Bildhöhe hast. Alternativ könntest du mit min-height arbeiten, was dann aber nicht alle Browser interpretieren.
Was aber immer gilt, wie wahsaga schon schrieb: Validen HTML Code bitte...

Gruss

tobi

[wahsaga]

Original geschrieben von jahlives
Alternativ könntest du mit min-height arbeiten, was dann aber nicht alle Browser interpretieren.

Oder Container ebenfalls floaten, oder overflow einsetzen, ...

[prego]

oder ein <div style="clear: both;"></div> in das container Div's der floats rein.

[Timo Trallala]

Das mit dem nicht validen Code kann ich mir nicht erklären!

Normalerweise jag ich den immer durch den Validator, bevor ich den irgendwo poste.

So, mal valide.
http://hafenvolleyballer.de/AJAX/format.php

Mir ist schon irgendwie klar, dass es an dem gefloateten Bild liegt.
"overflow: hidden" hab ich auch schon an diversen Stellen eingesetzt, behebt aber mein Problem nicht.

Trotzdem Danke für Euer Bemühen
derTrallala

[Timo Trallala]

Original geschrieben von prego
oder ein <div style="clear: both;"></div> in das container Div's der floats rein.

Jip -- works!

thanxs