WANTED: Hack gegen Darstellungsfehler im IE (Listen, Links)

[Gunnar Bittersmann]

Guten Tag, meine Damen und Herren! Guten Morgen, liebe Studenten!

Auf http://gundi.de/aktiv treten im IE folgende Fehler auf:

(1) Die Bullets sind nicht in der ersten Zeile vor den Listitems, sondern in vor deren letzter Zeile:
    foo
    • bar
  • • baz
statt
  • foo
    • bar
    • baz

(2) Beim Hovern über Links verschieben sich diese.

Woher kommen die Fehler? (Oder sollte man solche Fragen beim IE gar nicht erst stellen?)

Was kann man dagegen tun?

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

PS. Noch der Link zum Stylesheet: http://gundi.de/Styles/screen.css

[Gunnar Bittersmann]

(2) Beim Hovern über Links verschieben sich diese.

Dasselbe Problem tritt übrigens auch im IE6 bei Ashuras http://noctus.net/Start und bei http://www.subotnik.net/ auf.

Ich denke, der IE hat Probleme mit gefloateten Bereichen.

Kann man ihm auf die Sprünge helfen?

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

(2) Beim Hovern über Links verschieben sich diese.

Dasselbe Problem tritt übrigens auch im IE6 bei Ashuras http://noctus.net/Start und bei http://www.subotnik.net/ auf.

Stimmt; ich hatte diesen Bug des IE schon akzeptiert, wär aber ebenfalls an einer Lösung interessiert.

Ich denke, der IE hat Probleme mit gefloateten Bereichen.

Kann man ihm auf die Sprünge helfen?

Ich vermute, dass hier wieder einmal eine absolut blödsinnige Wertangabe erforderlich ist, sofern sich hier überhaupt etwas machen lässt.

Das Problem besteht aber auch schon bei älteren IEs, da sogar noch schlimmer.

Einen schönen Donnerstag noch.

Gruß, Ashura

[CarstenP]

Hallo Ashura,

Dasselbe Problem tritt übrigens auch im IE6 bei Ashuras http://noctus.net/Start und bei http://www.subotnik.net/ auf.

Redet Ihr eigentlich von Deiner Navigation?

Stimmt; ich hatte diesen Bug des IE schon akzeptiert, wär aber ebenfalls an einer Lösung interessiert.

Das Problem scheint zu sein, daß die Breiten Deiner Listenelemente etwas anders berechnet werden, wenn die Links darin halb versteckt sind bzw. voll sichtbar sind.

Ich vermute, dass hier wieder einmal eine absolut blödsinnige Wertangabe erforderlich ist, sofern sich hier überhaupt etwas machen lässt.

Breiten vorzugeben würde in der Tat helfen. Float ohne Breitenangaben wird es erst mit CSS 2.1 geben. Daher ist es auch nicht verwunderlich wenn speziell ältere Browser auf ein float ohne Breite allergisch reagieren (siehe z.B. IE 5.0).

Ich habe aber mit dem Code noch ein bißchen rumgespielt. Folgendes scheint auch zu helfen (, wenn Du auch weiterhin den IE 5.0 ausschließen willst):

1. streiche das "padding:0 0.3em;" aus "ul#navigation li/* */"
2. ergänze stattdessen "margin:0 0.3em;" für "ul#navigation li a:link/* */,ul#navigation li a:visited/* */"
3. ergänze "margin:0 -0.21em 0 0.3em;" für "* html ul#navigation li a:link/* */,* html ul#navigation li a:visited/* */"
4. ergänze "margin:0 0 0 .3em;" für "* html ul#navigation li a:hover/* */"

Der Knackpunkt ist der nur für IEs sichtbare negative "margin-right" für Deine Navigationslinks, der beim Hovern auf null gesetzt wird, wodurch die problematischen Größenunterschiede ausgeglichen werden. Ich habe es mit diversen Schriftarten durchprobiert, erstaunlicherweise kommt es in der Regel hin, auch bei Georgia und Times New Roman. Und da ein IE ja in der Regel ein Windows-System nach sich zieht, dürfte die Wahrscheinlichkeit groß sein, daß zumindest eine der beiden Schriftarten vorhanden ist. Wenn jemand die Schrift vergrößert, dann kommt es nicht mehr ganz hin, aber das Springen ist nicht mehr ganz so deutlich zu sehen wie vorher. Mit diesem "Trick" erschlägst also nicht alle aber doch die meisten. Aber Du kommst um die Größenangaben herum.

Weiß jemand, wie die Mac-IEs reagieren? Wenn die den ursprünglichen Code korrekt anzeigen, dann müßten die natürlich von diesen Manipulationen ausgelossen werden.

Viele Grüße
Carsten

[Ingo Turski]

Hi,

Breiten vorzugeben würde in der Tat helfen. Float ohne Breitenangaben wird es erst mit CSS 2.1 geben. Daher ist es auch nicht verwunderlich wenn speziell ältere Browser auf ein float ohne Breite allergisch reagieren (siehe z.B. IE 5.0).

Eher nicht. CSS 2.1 berücksichtigt doch gerade die tatsächlichen Imlementationen von CSS 2.0. Die Notwendigkeit, gefloateten Elementen eine Breite zuzuweisen, wurde genau aus dem Grund gestrichen, weil die Browser das ohnehin so umgesetzt haben, daß sich dann die Breite nach dem Inhalt richtet. Dies ist AFAIK auch beim IE 5.01 der Fall; jedenfalls hat er mit diesem Beispiel keine Probleme.

freundliche Grüße
Ingo

[CarstenP]

Hallo Ingo,

CSS 2.1 berücksichtigt doch gerade die tatsächlichen Imlementationen von CSS 2.0. Die Notwendigkeit, gefloateten Elementen eine Breite zuzuweisen, wurde genau aus dem Grund gestrichen, weil die Browser das ohnehin so umgesetzt haben, daß sich dann die Breite nach dem Inhalt richtet. Dies ist AFAIK auch beim IE 5.01 der Fall; jedenfalls hat er mit diesem Beispiel keine Probleme.

Du hast recht. Ich habe es eben auch nochmal mit einem ganz einfachen Beispiel ausprobiert. Auf Ashuras Seite scheint noch etwas anderes mit reinzuspielen, so daß sich die Darstellungsprobleme im IE 5.0 nur durch Größenangaben lösen lassen. Ich hatte mir Ashuras Seite im IE 5.0 angesehen und bemerkt, daß hier die Listenpunkte untereinander stehen. Es sah daher so aus, als wenn die Listenpunkte aufgrund fehlender Größenangaben über die ganze Fensterbreite gehen würden. Daher mein Fehlschluß.

Viele Grüße
Carsten

PS: Ich kann mich dunkel erinnern, daß ein Browser allerdings tatsächlich width für gefloatete Elemente brauchte, ich weiß bloß nicht mehr, welcher das war...

[Ashura]

Hallo CarstenP.

Dasselbe Problem tritt übrigens auch im IE6 bei Ashuras http://noctus.net/Start und bei http://www.subotnik.net/ auf.

Redet Ihr eigentlich von Deiner Navigation?

Ja.

Das Problem scheint zu sein, daß die Breiten Deiner Listenelemente etwas anders berechnet werden, wenn die Links darin halb versteckt sind bzw. voll sichtbar sind.

Ja, meine border-Experimente haben dies auch zu Tage geführt.

Breiten vorzugeben würde in der Tat helfen. Float ohne Breitenangaben wird es erst mit CSS 2.1 geben. Daher ist es auch nicht verwunderlich wenn speziell ältere Browser auf ein float ohne Breite allergisch reagieren (siehe z.B. IE 5.0).

Eine explizite Breite kann ich aber leider nicht vorgeben, da der IE sonst den Inhalt abschneiden würde (overflow:hidden).

Ich habe aber mit dem Code noch ein bißchen rumgespielt. Folgendes scheint auch zu helfen (, wenn Du auch weiterhin den IE 5.0 ausschließen willst):

Ich _muss_ den IE 5.0 ausschließen, da die Navigation dort sonst die gesamte Seite unbrauchbar macht.

1. streiche das "padding:0 0.3em;" aus "ul#navigation li/* */"
2. ergänze stattdessen "margin:0 0.3em;" für "ul#navigation li a:link/* */,ul#navigation li a:visited/* */"
3. ergänze "margin:0 -0.21em 0 0.3em;" für "* html ul#navigation li a:link/* */,* html ul#navigation li a:visited/* */"
4. ergänze "margin:0 0 0 .3em;" für "* html ul#navigation li a:hover/* */"

Danke für deine Mühen.
Aber aufgrund der verschachtelung in

* html ul#navigation li span a:link/* */,* html ul#navigation li span a:visited/* */

musste ich auf deine Vorschläge aufbauend noch ein wenig tricksen, um eine einigermaßen brauchbare Optik zu erzielen, ohne den Zittereffekt wieder herauf zu beschwören. Ich habe die margin-Spielchen IE-only gemacht, da ich die Darstellung in Browsern nicht negativ beeinflussen möchte.

Die Änderungen kannst du ja im Stylesheet nachvollziehen.

Wenn jemand die Schrift vergrößert, dann kommt es nicht mehr ganz hin, aber das Springen ist nicht mehr ganz so deutlich zu sehen wie vorher. Mit diesem "Trick" erschlägst also nicht alle aber doch die meisten. Aber Du kommst um die Größenangaben herum.

Ja, vielen Dank für deine Mühe.

Weiß jemand, wie die Mac-IEs reagieren? Wenn die den ursprünglichen Code korrekt anzeigen, dann müßten die natürlich von diesen Manipulationen ausgelossen werden.

AFAIR war die Optik ausreichend, ich komme aber momentan nicht an den MacIE heran.

P.S.: Ich hasse die Notwendigkeit von Hacks.

Einen schönen Sonntag noch.

Gruß, Ashura

[CarstenP]

Hallo Ashura,

Eine explizite Breite kann ich aber leider nicht vorgeben, da der IE sonst den Inhalt abschneiden würde (overflow:hidden).

Ich meinte eine Breite für die Listenelemente, nicht für die Links. Dann kämen sich auch width und overflow nicht gegenseitig in die Quere. Und damit wäre die Navigation auch im IE 5.0 nicht mehr zerschossen.

Aber insgesamt sähe es dann nicht mehr ganz so toll aus, so daß ich die jetzige Lösung auch eindeutig bevorzugen würde.

Viele Grüße
Carsten

[CarstenP]

Hallo Gunnar,

(2) Beim Hovern über Links verschieben sich diese.

Dasselbe Problem tritt übrigens auch im IE6 bei Ashuras http://noctus.net/Start und bei http://www.subotnik.net/ auf.

Bei subotnik ist es dasselbe Problem wie bei Dir: Prozentwerte für Padding.
Bei Ashura ist es ein wenig komplizierter.

Viele Grüße
Carsten

[wahsaga]

Hi Gunnar,

welche Krankheit des IE versuchst du da mit

* html li {
  height: 1%;
}

zu kurrieren?

Sobald ich das herausnehme, stellt der IE 5.01 die List-Bullets zumindest wieder korrekt vor dem jeweligen Listenpunkt dar. (Auch wenn jetzt die margins oder paddings anders sind, so das die Punkte näher aufeinander hocken.)

Davon ab noch was zu obigem "Hack": Den sollte man m.W. vor dem IE Mac verstecken, weil der height nicht wie min-height interpretiert, und dann u.U. seltsame Effekte bei einer unbeabsichtigten Elementhöhe von 1px herauskommen.

gruß,
wahsaga

[Gunnar Bittersmann]

Hi wahsaga,

welche Krankheit des IE versuchst du da mit
* html li {
  height: 1%;
}
zu kurrieren?

Oops, ein fruchtloser Versuch, den ich vergessen hatte, wieder rauszunehmen. Ist jetzt weg.

Live long and prosper,
Gunnar

[wahsaga]

hi,

Oops, ein fruchtloser Versuch, den ich vergessen hatte, wieder rauszunehmen. Ist jetzt weg.

und, problem damit gelöst?

gruß,
wahsaga

[Ashura]

Hallo wahsaga.

Oops, ein fruchtloser Versuch, den ich vergessen hatte, wieder rauszunehmen. Ist jetzt weg.

und, problem damit gelöst?

Das Problem mit den Listenpunkten ja, aber leider nicht das Problem der wandernden Objekte.

Einen schönen Freitag noch.

Gruß, Ashura

[Gunnar Bittersmann]

welche Krankheit des IE versuchst du da mit
* html li {
  height: 1%;
}
zu kurrieren?

Oops, ein fruchtloser Versuch, den ich vergessen hatte, wieder rauszunehmen. Ist jetzt weg.

und, problem damit gelöst?

Nicht nur dieses, sondern auch jenes: Geordnete Listen auf anderen Seiten der Site stellte der IE nicht als
  1. foo
  2. bar
  3. baz
sondern als
  1. foo
  1. bar
  1. baz
dar.

Was Höhe mit Numerierung zu tun hat, ist wohl eins der streng gehüteten Geheimnisse in  Redmond, WA.

Live long and prosper,
Gunnar

[CarstenP]

Hallo Gunnar,

(2) Beim Hovern über Links verschieben sich diese.

Diese Zeilen in Deinem CSS sind schuld daran:

#topNavigation, #suche, #breadcrumbs, #aufDieserSeite, #inhalt, #inhaltsverzeichnis, #sieheAuch, #fuss {  
 padding: 1%;  
}

Anscheinend wird beim Hovern das Padding neu berechnet und es ergeben sich andere Dimensionen als vorher (frag mich aber bitte nicht wieso), weswegen sich alles verschiebt oder sogar so wie die W3C-Buttons hin und her springt.

Viele Grüße
Carsten

[Gunnar Bittersmann]

Diese Zeilen in Deinem CSS sind schuld daran:

#topNavigation, #suche, #breadcrumbs, #aufDieserSeite, #inhalt, #inhaltsverzeichnis, #sieheAuch, #fuss {

padding: 1%;
}

> Anscheinend wird beim Hovern das Padding neu berechnet und es ergeben sich andere Dimensionen als vorher  
  
Ja, mit `padding: 10px`{:.language-css} schiebt und schubst nichts mehr.  
  
Danke, Carsten  
  
Live long and prosper,  
Gunnar  
  
PS. Bin erst jetzt wieder an einen IE6 gekommen.

-- 
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)