IE erweitert padding-right eines <li>-Elements

[ambiente1]

Nabend!

Auf meiner Problemseite erweitert der IE10/11/Edge13 jeweils das rechte Padding vom ersten <li>-Element der Navigationsleiste.

Wenn ich alle <li>-Elemente auf display: inline; setze, dann ist dieses Padding-Problem weg, allerdings habe ich dann beim zweiten <li>-Element ein erweitertes Padding durch einen Space im HTML-Code und die Transition funktionieren nicht mehr korrekt.

Wie werde ich jetzt Herr darüber, dass im ersten <li>-Element das Padding auch korrekt angenommen wird?

Habe schon diverse Varianten mit display: inline, display: inline-block oder float: left ausprobiert, aber nichts funktioniert.

Mir glüht langsam der Kopf... :-(

Grüße Alex

[Matthias Apsel]

Hallo ambiente1,

Auf meiner Problemseite erweitert der IE10/11/Edge13 jeweils das rechte Padding vom ersten <li>-Element der Navigationsleiste.

Nein. padding-right ist auf Null. Auch im Edge. Der hat offenbar ein Problem mit der Ermittlung von Größen bei svg-Grafiken. Setze statt

ul#nav_main > li > a > img {
  width: auto;
}

eine feste Breite für das Bild.

Der Selektor ist im Übrigen überspezifiziert. Eine nav_main wird es ja projektweit nur einmal geben, es gibt also keinen Grund ul#nav_main zu schreiben. Und wie ich das sehe, ist es auch das einzige Bild in der Navigation:
#nav_main img sollte reichen.

Mir glüht langsam der Kopf... :-(

Benutze die Entwicklertools der Browser.

Bis demnächst
Matthias

[ambiente1]

Setze statt

ul#nav_main > li > a > img {
  width: auto;
}

eine feste Breite für das Bild.

Danke! Ich habe aus einem anderen Thread gelernt, dass wohl IE Probleme mit der Ermittlung/Darstellung von SVG-Grafiken hat, aber offensichtlich mehr mit der Breite als mit der Höhe. Hatte die Höhe definiert und die Breite auf auto. Andersrum funktioniert es jetzt - Höhe auf auto, Breite definiert.

Benutze die Entwicklertools der Browser.

Mach ich schon. ;-)