Workaround für IE...

Hey,

ich habe eine Navigationsleiste in HTML5 verfasst und die Datei inklusive zugehöriger CSS Datei durch den W3C Validator gejagt, der mir schließlich grünes Licht gegeben hat.
Die Seite wird auch meinen Wünschen gemäß dargestellt, wären da nicht Internet Explorer 8 und abwärts…

Quelle:
MENU_TEST
http://master2000.pytalhost.at/navigation/css/styles.css

Im aktuellen IE (v.9) bzw. IE v.10
ist alles gut:

http://master2000.pytalhost.at/navigation/ie_test/ie10.jpg
http://master2000.pytalhost.at/navigation/ie_test/ie9.jpg

IE v.5 - v.8 machen aber Probleme:
http://master2000.pytalhost.at/navigation/ie_test/ie8.jpg
http://master2000.pytalhost.at/navigation/ie_test/ie7.jpg
http://master2000.pytalhost.at/navigation/ie_test/ie6.jpg
http://master2000.pytalhost.at/navigation/ie_test/ie5.jpg

Die Einbindung der Modernizr - js-Datei ( http://modernizr.com/ ) überzeugt auch noch den IE8 zur korrekten Darstellung, nicht jedoch IE7.

Weswegen werden manche margin, bzw. padding Angaben in diesen IEs einfach ignoriert, bzw. die float Elemente vertikal versetzt angezeigt?
Welcher Work-Around garantiert die verlässlichste Umsetzung moderner Allgemein-Standards im Internet Explorer? (zumindest bis Version 7 sollte die Seite abwärts kompatibel sein)

Danke für eure Hilfe,
me.

Hi,

ich habe schon die erfahrung gemacht, dass der IE Tester die Website nicht immer so anzeigt wie der jeweilige Browser selbst. Habe / kenne aber leider auch keine Möglichkeit einfach in IE7 -10 Testen zu können.
Hast du Statistiken von deiner Website, wieviele (inProzent) noch den IE 7 benutzen? Wenn der Anteil verschwindent gering ist und der Aufwand zur IE 7 optimierung zu groß ist, würde ich sogar dahin tendieren zu sagen, du lässt den IE 7 support bleieben.

Ansonsten könntest du versuchen mit Styleangaben nur für den IE 7 also mit dort das Layout noch geradezubiegen.

PS: Noch besser wäre es, wenn du deinen HTML Code so schreibst, dass du es den Browsern einfacher machst alles richtig anzuzeigen.
Bsp. Deinen li´s das float left geben statt den a Tag darinnen nach den floatenden Elementen ein clear einfügen:

// .clear{ clear:both;} usw.

Also schon die Art, wie du deine Seite aufbaust und stylest kann einen Unterschied machen.

Vielen Dank für die Antwort!

Ich habe die HTML Elemente , , als Block-Elemente ausgezeichnet, die „padding“, „margin“, „float“ und „width“ Eigenschaften der

  • statt dem Tag zugeordnet und tatsächlich:
    sämtliche IE zeigen nun auch eine korrekte Darstellung. Erstmals vielen Dank hierfür!

    Warum ich die Formatierungseigenschaften „padding“, „margin“, „float“ und „width“ ursprünglich dem statt dem

  • Tag zugeordnet hatte, hat aber einen bestimmten Hintergrund:
    a:hover macht nun nämlich Probleme, da es sich ja logischerweise nur auf den
    Tag bezieht (die Formatierungen nun aber
  • beschreiben):

    http://master2000.pytalhost.at/navigation/ie_test/problem_hover.jpg

    Habe natürlich versucht, die

  • Eigenschaften a:hover zuzuordnen, dieser nimmt aber die width Eigenschaften nicht an:

    http://master2000.pytalhost.at/navigation/ie_test/problem_hover_padding_width.jpg

    Wahrscheinlich übersehe ich hier mal wieder etwas äußerst Logisches… ich wäre für eure Hilfe diesbezüglich trotzdem wahnsinnig dankbar!

    LG,
    me.

  • Hm ok, sollte aber eigneltich leicht zu ändern sein:

    Bei Bild 1 einfach das padding den a element geben statt des li´s, dann sollte das a Tag das li ganz ausfüllen und der hovereffekt sollte gehen. Zusätzlich zum padding sollte das a Tag auch noch display:block; haben, damit das padding funktioniert.

    Funktioniert das so?

    Bei Bild 2 sieht es so aus als hätte wieder das a Tag den hover Effekt nur, dass das a Tag nicht die ganze breite ausfüllt?

    Ansonsten lade doch mal den neuen Code (wo die li´s das margin und float und width haben) hoch, oder poste mal den neuen Code, damit man das (besser als bei den Bildern) nachvollziehen kann.

    Ok,

    habe die modifizierte Version hochgeladen aus welcher die Problematik klar[er] ersichtlich ist:
    MENU_TEST

    In den Kommentaren von
    http://master2000.pytalhost.at/navigation2/css/styles.css
    findet sich eine detailierte Aufschlüsselung der [neuen] Problematik (siehe ab: „nav ul li a:hover“)

    Danke,
    me.

    Ah, ok du hast da ein bisschen was vermischt mit deinen Angaben zu li und a und dem hover → Wenn du z.B. dem ul li a:hover 120px width gibst, was vorher nicht beim a Tag war ist ja klar das der Menüpunkt größer wird.

    Übernehm mal folgende Style Angaben in deiner CSS Datei:

    Den a Tags die Breite und padding für den normalzustand geben sowie display:block;

    nav ul li a, nav ul li a:active, nav ul li a:visited {
    
        background-color: #B92828;
        color: #FFFFFF;
        display: block;
        padding: 5px;
        text-decoration: none;
        width: 120px;
    
    
    }

    Dann den Hover Effekt auf das wesentliche reduziert (es soll sich ja nur die farbe ändern):

    nav ul li a:hover {
    
        background-color: #FF0000;
    
    
    }
    
    

    Den Li´s bleiben also nurnoch folgende angaben im CSS

    nav ul li {
    
        display: block;
        float: left;
        margin: 0 1px 0 0;
        text-align: center;
    
    
    }
    
    

    Die Werte den ensprechenden Attributen zuzuordnen macht doch TATSÄCHLICH Sinn… :slight_smile:

    Vielen Dank für deine Hilfe, meinen Denkknoten zu entwirren!

    LG,
    me.