seltsamer Explorer Bug

[m a x]

Hallo ich habe einen sehr seltsamen Explorer Bug zu verzeichnen und wollte fragen ob jemand das Problem kennt oder Abhilfe weiss.

Auf einer HTML-Seite werden bestimmte Elemente nicht angezeigt wenn die Seite neu geladen wird (siehe Anhang). Wobei nicht angezeigt bedeutet das die Schriftfarbe diesen Elementen nicht zugewiesen wird. Wenn ich den Text mit der Maus anclicke wird die Schriftfarbe dann doch angezeigt. Auch wenn ich die betreffenden Stellen aus dem Bild scrolle und dann wieder zurückscrolle werden die Elemente wie gewünscht dargestellt.

Das HTML-Dokument ist valide nach Transitional 4.01 und CSS ist auch gültig, außerdem tritt dieses Phänomen nur im Explorer(6.0) auf.

Ich bin ratlos!?
Ach ja, der Anhang verdeutlicht hoffentlich was ich meine. Im ersten Eintrag nach Lesung fehlen die Überschrift und die Ortsbeschreibung, zumindest bis ich ein wenig gescrollt habe.

 

[Gumbo]

Dann zeig doch mal das „Sorgenkind“.

 

[Maik]

Anhand des angehängten "Screenshots" lässt sich die Ursache nicht ausmachen. Zeig doch mal den Quellcode (HTML + CSS), oder nenne einen Link zur Seite, damit man da einen Blick drauf werfen kann.

 

[m a x]

Zu finden unter

http://www.kultur-initiative.net/

Ich versuche mal einen anderen Explorer zu finden vielleicht hat es ja was mit der Version zu tun.

 

[Maik]

Ich weiß jetzt nicht, wozu die fettmarkierte float-Eigenschaft in den einzelnen Abschnitten / Blöcken gut sein soll, aber wenn ich sie rausnehme, stellt der IE den Text korrekt dar.

Aus

<div class="kalender_element">
  <b>"Winterlichter" Adventsfest rund um den Neustädter Markt</b><br/>Sonntag  3.12.2006  14Uhr Bürgerverein Neustädter Markt<br/>
  <div style='float:left;padding-left: 3px;'>Familiengottesdienst in der Heilig-Kreuz-Kirche, Basar, Kaffe und Kuchen, Kinderflohmarkt, ein Spielmobil, Ponykutsche, Glühwein, Adventsliedersingen und vielen weiteren weihnachtlichen Überraschungen</div>
  <div style='clear:both;'></div>
</div>

wird

<div class="kalender_element">
  <b>"Winterlichter" Adventsfest rund um den Neustädter Markt</b><br/>Sonntag  3.12.2006  14Uhr Bürgerverein Neustädter Markt<br/>
  <div style='padding-left: 3px;'>Familiengottesdienst in der Heilig-Kreuz-Kirche, Basar, Kaffe und Kuchen, Kinderflohmarkt, ein Spielmobil, Ponykutsche, Glühwein, Adventsliedersingen und vielen weiteren weihnachtlichen Überraschungen</div>
</div>

 

[m a x]

Daran hat es wohl gelegen.
Das "float" hatte ich eingebaut um falls Bilder eingefügt werden ein wenig Abstand zum Text zu lassen. Ich habs jetzt mal so gestaltet das es nur ausgegeben wird wenn auch wirklich ein Bild eingebunden wird. Damit ist zumindest bei "meinem" Explorer (6.0) die Ausgabe ohne Bild korrekt.


Jetzt habe ich mal ein Bild eingefügt und siehe da, das Problem tritt erneut im Explorer auf (bei dem Bildeintrag) . Nur dass diesmal auch Firefox nicht das gewünschte darstellt und den Text nicht rechts neben dem Bild floatet.

Dank michaelsinterface Erkenntnissen sollte das Thema vielleicht eher dem Forum CSS zugeordnet werden.
Zumindest hat eine CSS-Änderung ein wenig zur Lösung des Rätsels beigetragen.

Mein Ansatz war jedenfalls innerhalb eines div noch zwei weitere divs einzubauen um den Textfluss zu ermöglichen.
Ist doch eigentlich möglich und machbar, oder?

 

[Maik]

Vielleicht hilft dir folgender Lösungsvorschlag weiter.

Zunächst erhält das DIV .kalender_element eine minimale Höhe:

.kalender_element {height:1%; color:#141414; background-color: #f6f6bf; border: 2px solid white; margin-top: 10px;  padding: 5px;}
.kalender_element p { margin:0; }

Und im zweiten Schritt wird der Inhalt in dem DIV .kalender_element unter Einsatz des p-Elements neu strukturiert:

<div class="kalender_element">
     <b>bildtest</b>
     <p>Freitag 29.12.2006  18Uhr VOR ORT OST, Projektgalerie des Bundes Bildender Künstler</p>
     <img src='http://www.kultur-initiative.net/img/200612/54.jpg' alt='Veranstaltungsbild' style="float:left;margin-right:3px;"> bildtestbildtest bildtestbildtest bildtestbildtest  bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest&nbsp;
     <p style="clear:left;"> bildtestbildtest bildtestbildtest bildtestbildtest  bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest bildtestbildtest&nbsp;</p>
</div>

Das Thema wird ins CSS-Board verschoben.