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…
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)
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.
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.
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;
}