CSS Menu und z-index im IE7

[Sprint]

Hallo zusammen,

ich bin gerade dabei, eine alte Seite in ein neues, responsives Template einzubauen. Dabei stellt sich jetzt das Problem, daß das Menü sich im Explorer 7 teilweise unter den Content schiebt. Ich habe jetzt schon mit dem z-index gespielt bis zum kurz vorm Erschießen, komme aber auf kein Ergebnis. Und der Kunde meint natürlich, daß unheimlich viele IE7 User noch unterwegs sind und will die Seite nicht abnehmen, solange sie nicht auch am 7er zumindest funktioniert. Dabei will ich aber auch vermeiden, extra für die Gurke ein anderes Menü einbauen zu müssen.

Ich hätte ja gerne ein paar Ausschnitte aus dem Quelltext und der CSS Datei hier eingestellt, da ich aber nicht weiß, woran es effektiv liegt, bringt das wohl nicht viel. Ich hoffe, ihr könnt mir trotzdem helfen. Die Testseite ist hier zu finden:

http://test.kachelofendesign-hopp.de/index.html

Und zwar passiert das sowohl auf der Startseite bei dem Coverflow als auch auf allen Unterseiten mit den Überschriften.

Vielen Dank schon mal im Voraus,
Sprint

 

[SpiceLab]

Ist das Problem zwischenzeitlich gelöst?

Forbidden

You don't have permission to access /index.html on this server.

 

[Sprint]

Ist das Problem zwischenzeitlich gelöst?

Ja und nein. Das Problem mselbst ist nicht gelöst, also haben wir die alte Seite auf eine Subdomain verschoben und IE7 und 8 User werden per JS oder PHP dahin umgeleitet. Die Verbreitung ist ja nicht mehr sonderlich groß und in etwa 2-3 Jahren kann man die dann entsorgen. Die 8er wurden auch mitgenommen, da auf der Seite auch noch ein Upload Verfahren dabei ist, das im 8er bei Dateien über 100kb abgesemmelt ist.

 

[SpiceLab]

Und an einer Lösung für diese "Übergangszeit" bist du dann offensichtlich auch nicht mehr interessiert, da die Testseite down ist... (?!)

 

[Sprint]

Die Testseite ist deshalb down, da sie inzwischen auf die Hauptdomain umgezogen ist.

Eine Lösung wäre im Prinzip schon gut, aber wegen des vorhin schon beschriebenen Problems mit dem Fileupload würde das ja leider nicht helfen. Darum wurde das auch nicht weiter verfolgt. Den Effekt mit dem Menü kan man auch im IE9 oder höher in der Simulation sehen, da der sich immer als 9er identifiziert. Echte 7 und 8er werden umgeleitet.

 

[SpiceLab]

Einfach dem umgeleiteten IE-User einen anderen HTML-Code aufzutischen, und darin den Menüpunkt "Wissen" mit Submenü vorzuenthalten, ist die mit Abstand ausgefuchstete Lösung

 

[Sprint]

Nö, ist die normalste Lösung. Ist die alte Website und wenn du dir die alte Seite mal etwas genauer anschaust, wird dir auffallen, daß die Wissen - Punkte da direkt im Hauptmenü stehen!! ;-)

 

[SpiceLab]

Frei nach deinem Motto: "Think Different" ;-)

Die Fehlerursache findet sich nicht im CSS, sondern im verwendeten HTML5-Element <nav> </nav> zum Auszeichnen der Navigationsleiste, das von IE7 und IE8 nicht interpretiert (unterstützt) wird.

Die Nachfahren-Selektoren zur Formatierung des darin eingebetteten Listenmenüs

.main-menu ul {...}
.main-menu li {...}
/* usw. */

laufen bzw. liefen damit bei ihnen ins Leere.

 

[Jan-Frederik Stieler]

Hi,
damit:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

sollte auch der IE HTML5 darstellen können.

Grüße

 

[SpiceLab]

damit:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

sollte auch der IE HTML5 darstellen können.

"Der" IE beschränkt sich auf die erwähnten Vorgänger des IE9, wie es auch im Conditional Comment der Bedingung lt (less-than = kleiner als) zu entnehmen ist