Darstellungsfehler IE7

Moe

Moe

1
Ich habe das Problem, dass auf unserer Webseite zwei Fehler im IE7 auftreten (der immer noch ca. 4,5% des Traffics aufmacht):

Die Navigation oben bricht (obwohl komplett CSS) an einer Stelle um, an der sie nicht umbrechen sollte. Eigentlich sollte sie überhaupt nicht umbrechen. Das ganze passiert nach einem Element in der Liste, dass kein Hover-Menü mehr hat (wenn man auf einigen Einträgen hovert, dann hängen wir unten ein Menü ran). Wüsste da jemand einen Tipp oder hätte eine Idee?

Ebenfalls ein IE7 Bug ist auf den individuellen Produktseiten zu sehen. Die Größentabelle, auf der sich die entsprechende Größe auswählen lässt, wird nicht in einer normalen Float-Liste dargestellt, sondern untereinander.

Ich habe zur Illustration ein paar Bilder angehangen.

Für jegliche Hinweise (und das nicht einmal Code sein) bin ich dankbar!
 
Zur individuellen Produktseite:
Eine sehr ungewöhnliche Umsetzung. Hier werden einige Dinge eingesetzt, bei welchem die IE-Reihe bekanntermassen Probleme macht.

Zum Beispiel werden beim <span /> im <li /> ein display:table-cell & min-width verwendet. In diesem Artikel erwähnt und in diesem kurz und prägnant: "display:table-cell is not supported by IE 6 and 7.They'll display your h3 at its normal display-value: block."
Da jedoch davon ausgegangen werden kann, dass ein <li /> immer genau gleich gross ist, wieso nicht einfach (wie du bereits erwähntest) eine simple, gefloatete Liste? Der display:table-cell bei den <li />'s soll wahrscheinlich dazu dienen, die Grössen möglichst tabelarisch darzustellen. Da die Inhalte jedoch eine sehr ähnliche Breite (keine grossen Ausreisser) aufweisen, könnte hier ebenfalls mit einer fixen Breite (möglichst nicht per min-width) gearbeitet werden. Eine andere Möglichkeit wäre - wie früher noch, als sie noch nicht verschriehen wurden - direkt eine Tabelle zu verwenden.

Zum Header:
Hier kann ich leider nichts genaues dazu sagen, aber ich behaupte einfach mal spontan in den Raum hinaus:

Die <li />'s mit Submenu kriegen eine zusätzliche Klasse .level-top, womit sie nach links gefloatet werden. Diejenigen ohne Submenus allerdings nicht, womit sie als list-item dargestellt werden. Ohne testen zu können sehe ich hier eine potentielle Fehlerquelle.
 
Nach deinem Tipp habe ich das Navi gefixt bekommen, indem ich einfach zu jedem Item in der Navigation "level-top" hinzugefügt habe. Das funktioniert dank "position:relative".

Was den Rest angeht bin ich leider heute noch nicht weit gekommen, aber Donnerstag geht's weiter.

Mir ist dabei ein weiterer Bug aufgefallen: Das ausklappbare Menü, welches beim hovern unten an das level-top Item angehängt wird (per position:absolute), verschwindet nach dem Ende des hover-Event (also, die Maus bewegt sich wieder vom hover-Item herunter) nicht wieder. Zwar sind hover-Fehler im IE ja keine Seltenheit, aber vielleicht hast du ja noch einen so genialen Tipp wie für das Navi :)

Danke!
 
Noch eine kurze Anmerkung: Die li's der Größenangaben auf der Produktseite sind leider nicht immer gleich groß, denn es gibt auch Größen wie "onesize" und/oder "rechts","links", "unisex" usw. .. :)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben