Darstellungsprobleme bei floats in ie5 und ie 6 – Peekaboo-Bug?

chillosoph

Hallo,

kämpfe gerade damit, dass einige Seiten meines neuen Themes in ie5 und ie6 nicht korrekt dargestellt werden. Dort, wo eine horizontale Bilderleiste mittels float eingefügt ist, werden die Bilder und der angrenzende Text nicht dargestellt.

Hier ein Link auf eine der Seiten: Grenzenlos » BildungEducation.

Um den Block mit den Inhalten nach unten zu begrenzen, hatte ich zuerst ein gecleartes div eingebaut. Das brachte aber Probleme mit dem Peekaboo-Bug in ie 5 und 6.
Versuche, die betroffenen Elemente durch die position:relative; oder die Angabe einer expliziten line-heigt: von dem Bug zu befreien, haben nichts gebracht. Habe daraufhin das geclearte div entfernt und folgende Lösung ins CSS eingefügt:

Code

.post:after, .entry:after, .pichor:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


.post, .entry, .pichor {display: inline-block;}


/* Hides from IE-mac \*/
* html .post, * html .entry, * html .pichor {height: 1%;}
.post, .entry, .pichor {display: block;}
/* End hide from IE-mac */

Alles anzeigen

Der Hack sollte eigentlich das geclearte div dynamisch erzeugen, im Quellcode (s. unten) ist aber nichts davon zu sehen.
In ie 7 wird alles sauber dargestellt, in ie5 und ie6 immer noch nicht.
Das HTML ist valide, daran sollte es also nicht liegen.
Nun bin ich ziemlich ratlos. Wer kann mir helfen?

Hier der Quellcode der Seite:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>Grenzenlos   &raquo; BildungEducation</title>


<meta name="generator" content="WordPress 2.0.4" /> <!-- leave this for stats -->


<link rel="stylesheet" href="http://www.grenzenlos-ggmbh.de/wordpress/wp-content/themes/normal/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Grenzenlos RSS Feed" href="http://www.grenzenlos-ggmbh.de/wordpress/?feed=rss2" />
<link rel="pingback" href="http://www.grenzenlos-ggmbh.de/wordpress/xmlrpc.php" />
<link rel="stylesheet" type="text/css" media="print" href="http://www.grenzenlos-ggmbh.de/wordpress/wp-content/themes/normal/print.css" />


<style type="text/css" media="screen">


</style>


</head>




<body>


<div id="page">


<div id="header">
    <div id="headerimg"> 
        <h1 class="screenreader"><a href="http://www.grenzenlos-ggmbh.de/wordpress/">Grenzenlos</a></h1>
        <div class="screenreader">Produkte und Service für alle</div>
        <!--<div class="description">Produkte und Service für alle</div>-->
</div>


<a href="#scndbar" class="skip">Spring zu den Optionen</a>
<a href="#content" class="skip">Spring zum Inhalt</a>


    <div id="navibar">
            <ul class="navitems">
            
                <!--TEST
http://grenzenlos-ggmbh.de/wordpress/
http://grenzenlos-ggmbh.de/startvdb.htm/
--><li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=3" title="Start ">Start </a></li>
<li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=4" title="Tourismus">Tourismus</a></li>
<li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=5" title="Druckerei">Druckerei</a></li>
<li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=6" title="Projekte">Projekte</a></li>
            </ul>
            <ul id="extern">
                <!--TEST
http://grenzenlos-ggmbh.de/wordpress/
http://grenzenlos-ggmbh.de/startvdb.htm/
--><li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/startvdb.htm" title="Behindertenverband">Behindertenverband</a></li>
            </ul>
    </div>


</div>
<div id="sidebar">


<!-- Implementierung des Plugins Navigo. jb -->


<div class="bar1">


        <ul id="level2">
            <li id="level2active"><a id="level2current" href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=44"title="Bildung">Bildung</a>
            <ul id="level3">
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=48"title="Bildungsprogramm">Bildungsprogramm</a></li>
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=49"title="»Gästen mit Handicap">»Gästen mit Handicap</a></li>
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=50"title="Reisebegleitung">Reisebegleitung</a></li>
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=51"title="Termine">Termine</a></li>
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=52"title="Referenzen">Referenzen</a></li>
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=53"title="Kontakt">Kontakt</a></li>
                <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=54"title="AGB">AGB</a></li>
            </ul></li>
            <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=45"title="KLAR">KLAR</a></li>
            <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=46"title="TEAM">TEAM</a></li>
            <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=47"title="Typhlo & Tactus">Typhlo & Tactus</a></li>
        </ul>


<!-- navigation list code generated by 'navigo' - http://adahas.com/work/navigo/ -->


</div>


<div class="bar3">
<ul><!--TEST
http://grenzenlos-ggmbh.de/wordpress/
http://grenzenlos-ggmbh.de/startvdb.htm/
--><li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=8" title="Links">Links</a></li>
<li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=16" title="ESF">ESF</a></li>
<li class="page_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?page_id=17" title="EQUAL">EQUAL</a></li>
</ul>
</div>


<div class="bar2">
<ul>    <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?cat=2" title="Termine, Calendar">Termine</a>
</li>
    <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/?cat=3" title="Neuigkeiten">News</a>
</li>
</ul>
</div>


</div>




<div id="scndbar">


<div class="bar1">


<h3>Optionen</h3>


<!-- Implementierung des Polyglot-Plugins. jb -->


<ul>
<li><h4>Sprache:</h4></li><li class="language_item current_language_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?lp_lang_pref=de&amp;page_id=44"><img src="http://www.grenzenlos-ggmbh.de/wordpress/wp-content/plugins/polyglot_flags/de.png" alt="deutsch" title="deutsch" /></a></li><li class="language_item"><a href="http://www.grenzenlos-ggmbh.de/wordpress/?lp_lang_pref=en&amp;page_id=44"><img src="http://www.grenzenlos-ggmbh.de/wordpress/wp-content/plugins/polyglot_flags/gb.png" alt="english" title="english" /></a></li> 
</ul>


<!--   Themeswitcher-Plugin von boren.nu. jb -->


<ul>


<li><h4>Kontrast:</h4>
<!--    <ul id="themeswitcher">
    <li>Normal</li>
    <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/index.php?wptheme=Schwarz-gelb">Schwarz-gelb</a></li>
    <li><a href="http://www.grenzenlos-ggmbh.de/wordpress/index.php?wptheme=Violett-gelb">Violett-gelb</a></li>
</ul> -->
    <ul id="themeswitcher">
<li>
    <select name="themeswitcher" onchange="location.href='http://www.grenzenlos-ggmbh.de/wordpress/index.php?wptheme=' + this.options[this.selectedIndex].value;">
        <option value="Normal" selected="selected">Normal</option>
        <option value="Schwarz-gelb">Schwarz-gelb</option>
        <option value="Violett-gelb">Violett-gelb</option>
    </select>
</li>
</ul>  </li>


</ul>


<!-- .themeswitcher -->


<ul><li><form method="get" id="searchform" action="http://www.grenzenlos-ggmbh.de/wordpress/">
<!-- Accessibility-Dingens, eingebaut nach:
http://www.brucelawson.co.uk/index.php/2005/wordpress-accessibility-hacks/ -->
<!--<h4 class="screenreader"><label for="s">Suche:</label></h4><br /> -->
<h4><label for="s">Suche:</label></h4><br />


<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go" />


</form>
</li></ul>


</div>


</div>




<a href="#navi" class="skip">Spring zum Navigationsmen&uuml;</a>


<div id="content" class="column">


<div class="post" id="post-44">
<h2>Bildung</h2>
<div class="entry">
<ul class="pichor">
<li><img id="image139" src="http://www.grenzenlos-ggmbh.de/wordpress/wp-content/uploads/2007/02/raul-und-stefan.jpg" alt="Tischrunde" /></li>
<li><img id="image142" src="http://www.grenzenlos-ggmbh.de/wordpress/wp-content/uploads/2007/02/anja-bei-kinderbuchfete-2.jpg" alt="Kinderbuchfest" /></li>
</ul>
<p>Menschen mit Behinderung sagen oft von sich, sie seien nicht behindert, sondern sie werden behindert. Diese Sichtweise wird verständlich, wenn man sich die vielfältigen Barrieren im Kopf und in der Realität vergegenwärtigt, die ein gleichgestelltes Leben in der Gesellschaft immer noch verhindern. Die Bedürfnisse von Menschen mit Handicap sind zum Teil grundlegend andere, zum Teil sind sie auch gleich. Dafür zu sensibilisieren, auf Probleme aufmerksam zu machen, das Verstehen zu fördern, Vorurteile und Angst ab- und Wissen aufzubauen, teure Planungsfehler zu vermeiden, macht sich die Bildungsarbeit der Grenzenlos gGmbH stark. Sie will – vorwiegend, aber nicht nur – auf dem Gebiet des barrierefreien Tourismus die Bildung und Kommunikation, die Einbeziehung aller und umfassende Barrierefreiheit voranbringen.
</p>
</div>
</div>


<p><a href="http://www.grenzenlos-ggmbh.de/wordpress/wp-admin/post.php?action=edit&amp;post=44">Beitrag bearbeiten.</a></p>
</div>


</div>




        </body>
</html>

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

Hi
versuchtest Du damit die line-height zu bekommen?

Code

.entry p, .entry ul, .entry ol, .entry * ul, .entry * ol {line-height:1.6em;}

wenn ja dann bedenke, dass die li die line-height gerne hätten,

nicht immer funktioniert die Vererbung so wie wir es uns wünschen und schon gar nicht, wenn hacks zum Umfallen ein CSS sowieso sehr instabil machen.

Du hast ein wunderbar modernes CSS,
aber zum Finden von solchen Zusammenhängen die diesen Bug erzeugen ist es schlicht eine Katastrophe ;)

ich bin ehrlich, ich arbeite sehr konservativ im css.
nutze auch niemals das clearing, das Du nutzt und der Peekaboo-Bug? hat sich bei mir noch nie sehen lassen:)

lg

Olafb

Mit den CSS hab ich auch schnell aufgegeben, so ein Durcheinander hab ich noch nicht gesehen. :-?
Ich hab nicht mitgezählt, manche Elemente haben aber mind. 3x die Anweisung margin-left:0; usw....

Aber wenn die ganzen Probleme nur an dem Float der Liste liegen, dann lass sie nicht floaten!
display:inline; für .pichor li und es sollte sich die gleiche Darstellung erreichen lassen.

chillosoph

Problem entschärft (aber noch nicht behoben)

Monika: Nett, dass Du Deine Kritik so dezent formuliert hast :)
CSS ist nicht gerade mein Spezialgebiet und Kaskadierung schon dreimal nicht. Immer wenn man denkt, eingeschachtelte Elemente müßten so oder so reagieren, wird alles ganz anders! Das wilde Durcheinander verdankt daher sich der Methode »Versuch & Irrtum«. Ich habe schon einige Bücher gewälzt, aber so richtig durchsichtig ist mir das immer noch nicht.
Kennst Du ein gutes Tutorial zum Thema Kaskadierung?

Olafb: Danke für den Tip, es lag zumindest teilweise am float.
Ich hatte, damit die Bildleiste schön freigestellt wird, aber noch eine Breite von 95% angegeben.
Seit ich diese Angabe gelöscht habe, wird die Seite in den ie-Browsern dargestellt und sieht ganz ordentlich aus.
Leider nicht in Firefox: die Textzeilen rücken direkt an die Bildleiste heran.
Hast Du eine Idee, wie sich das korrigieren lässt?

Olafb

Sorry, hab 10min probiert, da ist kein durchsehen. Dein Problem ist die Unaufgeräumtheit ;)
Fasse das mal alles bischen zusammen, also, alles was zu .pichor gehört in einen Block.
Sowas trennen, .enty, .nochwas, .pichor{..}
Sowas ganz löschen .igendwas *{...}

Dann sehen wir weiter. Oder du erteilst mir einen Auftarg dann mach ich das, 1-1,5 Stunden, PM bitte.

Monika

Zitat von chillosoph

Monika: Nett, dass Du Deine Kritik so dezent formuliert hast :)
CSS ist nicht gerade mein Spezialgebiet und Kaskadierung schon dreimal nicht. Immer wenn man denkt, eingeschachtelte Elemente müßten so oder so reagieren, wird alles ganz anders! Das wilde Durcheinander verdankt daher sich der Methode »Versuch & Irrtum«. Ich habe schon einige Bücher gewälzt, aber so richtig durchsichtig ist mir das immer noch nicht.
Kennst Du ein gutes Tutorial zum Thema Kaskadierung?...

das Chaos resultiert, weil Du CSS SHorthand und Angaben zusammenfassen - zum Umfallen gemacht hast ;)

um den Überblick zu bewahren -bewährt es sich:

generelle Angaben
Angaben zur Struktur
Angaben für Navi
Angaben für Beiträge

usw. einfach zu trennen

bei Dir ist dort was dann da was dann hie und dann oben und dabei gehört dies alles vielleicht zu einer einzigen class ;)

sowas macht man erst, wenn das CSS fertig ist funktioniert und mansich wirklichsicher ist auch den Durchblick zu haben

lg

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Darstellungsprobleme bei floats in ie5 und ie 6 – Peekaboo-Bug?

Jetzt mitmachen!