CSS-Probleme mit IE 7: Content nach unten verschoben

Lemra

Grünschnabel
Guten Tag,

wir haben den deutschsprachigen Teil unserer Website von Frames in css-basierte Seiten umprogrammiert. In den neueren gängigen Browsern scheinen sie zu laufen (getestet in Firefox >= 9, IE 8 + 9, Chrome 17, Opera >=9, Safari >= 3.2). Große Probleme macht vor allem der IE 7, aber Stichproben der Logfiles zeigen, dass die Seiten leider sehr häufig mit IE <= 7 aufgerufen werden, so dass diese Versionen berücksichtigt werden müssen. Der „content“ sollte rechts von der „navi“ angeordnet werden, IE 7 platziert ihn jedoch unterhalb der Hauptnavigation und zeigt in der „navi“ die Dreiecke nicht an. Den deutschsprachigen Seiten liegen drei Stylesheets zugrunde: layout.css, menu.css, txt.css.
Was ich schon versucht habe:
1. Seitenvalidierung: Es gibt 1 Error in html und 12 Fehler im css, die sich auf minimale Abweichungen von der Doctype-Deklaration und der css-Level beziehen. Das Angleichen dieser Fehler bewirkt im IE 7 keine Verbesserung, die anderen Browser können den kritisierten Code umsetzen (oder ignorieren ihn einfach); deshalb habe ich sie drin gelassen.
2. Conditional Comments: Browserweichen (lte), in denen ich z. B. den float-Abschnitten (andere) Höhen- und Breitenwerte hinzugefügt habe, zerschießen das eigentlich funktionierende Auswahlmenü im „content“ im IE7, ändern jedoch nichts an der Anordnung des „content“ unterhalb der „navi“.
3. Das box-model-Problem: Mit Hilfe zahlreicher Webseiten habe ich mit dem float den Breitenangaben (bzw. mit padding und margin) herumexperimentiert, was mir allerhöchstens auch den Seitenaufbau in den funktionierenden Browsern zerschossen hat; der IE 7 blieb bei allen Versuchen dabei, den content unter der navi anzuzeigen.
4. Auch mit einem vorgefertigten Javascript aus dem Netz habe ich mein Glück versucht – brachte nicht den erwünschten Effekt.
Daher bin ich jetzt am Ende meines ohnehin begrenzten css-Lateins … Weiß jemand Rat?
Als Testseite nutze ich:
http://www.lesbengeschichte.de/ztest_bio_eick_d.html; es sind alle (Unter-)Seiten online.
 
Ein paar Tipps:

#navi -> float: left ergänzen.

#navi ul li a:before -> kapiert der IE7 und älter nicht. Verwende statt dessen in #navi ul li a eine Hintergrundgrafik die genau die von dir gewünschte Form hat.
 
Wow!! ******
Herzlichen Dank******!

Ich habe gefühlte 100mal jeden code-Schnipsel verändert, aber diesen, #navi, offenbar/tatsächlich nicht! Und schwupps: ist der content oben!! Klasse!!

Den zweiten Teil deiner Hilfe verstehe ich allerdings nicht ganz (oder nicht richtig):
Eine Hintergrundgrafik****?
Das #navi ul li a:before{ ... ja, es leuchtet mir ein, dass da der Fehler liegen muss, weshalb die Dreiecke nicht angezeigt werden, aber wie verändere ich den Code, ohne den Code für die Dreiecke zu zerstören?
 
Diese Dreiecke erreichst Du momentan per Stylesheet. Das wird von IE7 und älter aber nicht unterstützt. Daher solltest Du dem Link selbst ein Hintergrundbild geben, welches dem Dreieck entspricht. Damit das nur der IE7 macht, könntest Du

Code:
*+html #nav ul li a { .. }

schreiben. Für den IE6 wäre es

Code:
* html #nav ul li a { .. }

Eine andere Möglichkeit über Stylesheets ohne Grafikverwendung gibt es für diese Browser nicht.
 
Gut, danke!
Dann muss ich nicht weiter suchen, sondern nur gucken, ob ich die Lösung mit dem Hintergrundbild wähle oder im IE 6 + 7 einfach auf die Dreiecke verzichte.

Danke sehr! Du hast mir sehr geholfen!
Toll!
 
Zurück