nicht angemeldet
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:
http://master2000.pytalhost.at/navigation/
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 Meinungen,
me.
-
Hallo,
Weswegen werden manche margin, bzw. padding Angaben in diesen IEs einfach ignoriert, bzw. die float Elemente vertikal versetzt angezeigt?
Wenn du HTML5-Elemente nutzt, musst du sie nicht nur dem Parser beibringen, was du ja schon erfolgreich gemacht hast, sondern auch so formatieren, wie du sie benötigst.
Die Standarddarstellung unbekannter Elemente ist display: inline; section, nav und andere Elemente sind aber Blockelemente, darum setze display: block;
Warum floatest du die a-Elemente und nicht die li-Elemente?
-
Hallo,
Weswegen werden manche margin, bzw. padding Angaben in diesen IEs einfach ignoriert, bzw. die float Elemente vertikal versetzt angezeigt?
Wenn du HTML5-Elemente nutzt, musst du sie nicht nur dem Parser beibringen, was du ja schon erfolgreich gemacht hast, sondern auch so formatieren, wie du sie benötigst.
Die Standarddarstellung unbekannter Elemente ist display: inline; section, nav und andere Elemente sind aber Blockelemente, darum setze display: block;
Warum floatest du die a-Elemente und nicht die li-Elemente?
Ich habe die HTML Elemente <nav>, <section>, <header> als Block-Elemente ausgezeichnet, die "padding", "margin", "float" und "width" Eigenschaften der <li> statt dem <a> 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 <a> statt dem <li> Tag zugeordnet hatte, hatte aber einen bestimmten Hintergrund:
a:hover macht nun nämlich Probleme, da es sich ja logischerweise nur auf den <a> Tag bezieht (die Formatierungen nun aber <li> beschreiben):http://master2000.pytalhost.at/navigation/ie_test/problem_hover.jpg
Habe natürlich versucht, die <li> 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.-
Hallo,
Warum ich die Formatierungseigenschaften "padding", "margin", "float" und "width" ursprünglich dem <a> statt dem <li> Tag zugeordnet hatte, hatte aber einen bestimmten Hintergrund:
Ich habe nur von der float-Eigenschaft gesprochen ;)
Habe natürlich versucht, die <li> Eigenschaften a:hover zuzuordnen, dieser nimmt aber die width Eigenschaften nicht an:
Ich nehme an, dir ist nicht klar, dass float Elemente automatisch zu einem Blockelement macht.
Wenn du also float von a auf li überträgst, musst du dem a-Element display: block; verpassen.
Und wie gesagt, es reicht, wenn du die li-Elemente floatest. Die a-Elemente können alle anderen Formate beibehalten (außer du hast noch Untermenüs, dann ist es sinnvoller die a-Elemente per "li:hover a" zu formatieren.
Gruß
-
-