Felix Riesterer: IE (alle) und Opera(!) auf Abwegen?!

Liebes Forum,

da teste ich nach nächtlicher Arbeit mein Ergebnis und werde vom IE (8) negativ überrascht. Mein FF und Safari zeigen mir die Seite so an, wie gewünscht, nur im IE und überraschenderweise auch in Opera sieht das Ergebnis nicht so aus, wie gewünscht.

Die fragliche Seite

Was mich natürlich besonders stört ist, dass der Hover-Effekt für die Lösungen im IE nicht klappt. Dabei habe ich extra alles in <a>-Elemente verpackt:

<li><a><span>Lösungsteil</span></a></li>

Mittels #loesung li a:hover span { visibility: visible; } sollte das Hovern die Lösung sichtbar machen - ganz ohne JavaScript und das auch im IE6. Jedoch lässt mich gerade dieser hier voll im Stich... Da hätte ich ja gleich einfacheres Markup mit li:hover benutzen (und den IE6 mittels JavaScript "pimpen") können.

Heute nachmittag werde ich mich daran machen, das Problem zu lokalisieren. Aber da ich keine Maschnine mit "echtem" IE6 habe, werde ich das auf verschiedenen Schulrechnern machen müssen. Falls mir jemand bis dahin einen heißen Tipp geben kann, wäre ich natürlich sehr dankbar!

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
  1. Hallo,

    da teste ich nach nächtlicher Arbeit mein Ergebnis und werde vom IE (8) negativ überrascht. Mein FF und Safari zeigen mir die Seite so an, wie gewünscht, nur im IE und überraschenderweise auch in Opera sieht das Ergebnis nicht so aus, wie gewünscht.

    Die fragliche Seite

    ich kann keinen Unterschied zwischen IE8 und Firefox 3.5.3 ausmachen.

    Was mich natürlich besonders stört ist, dass der Hover-Effekt für die Lösungen im IE nicht klappt. Dabei habe ich extra alles in <a>-Elemente verpackt:

    Welche Hover-Effekte werden in Deinem IE8 nicht angezeigt?
    Ich sehe im Firefox nur welche bei Brotkrümel-Navigation und Navigation am linken Rand - und die funktionieren im IE8 ganz genau so.

    Freundliche Grüße

    Vinzenz

    1. Hallo Felix,

      da teste ich nach nächtlicher Arbeit mein Ergebnis und werde vom IE (8) negativ überrascht. Mein FF und Safari zeigen mir die Seite so an, wie gewünscht, nur im IE und überraschenderweise auch in Opera sieht das Ergebnis nicht so aus, wie gewünscht.

      Die fragliche Seite

      ich kann in den von mir getesteten Browsern keine signifikanten Unterschiede ausmachen:

      IE8 (64Bit, Vista SP2, 32Bit, Windows XP SP3), IE7 (Windows XP SP3), IE6 (Windows XP SP3)
      Firefox 3.5.3 (Vista SP2, XP SP3), 3.0.12 (XP SP3)
      Opera 10.00 (XP SP3)
      Safari 4.0.3 (XP SP3)

      Freundliche Grüße

      Vinzenz

      1. Lieber Vinzenz,

        Die fragliche Seite

        ich kann in den von mir getesteten Browsern keine signifikanten Unterschiede ausmachen:

        nunja, "signifikant" ist relativ, oder nicht? Mich stört(e), dass IE und Opera das Hovern nicht so durchführen, wie ich das erwartet hätte. Mit einem sinnfrei befüllten href-Attribut ist das aber "gefixed".

        Weitere "signifikante" Unterschiede sieht man in der Nummerierung der Liste. IE und Opera bauen leider Mist! Hast Du noch eine Idee?

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Hallo,

          Die fragliche Seite

          ich kann in den von mir getesteten Browsern keine signifikanten Unterschiede ausmachen:

          nunja, "signifikant" ist relativ, oder nicht? Mich stört(e), dass IE und Opera das Hovern nicht so durchführen, wie ich das erwartet hätte. Mit einem sinnfrei befüllten href-Attribut ist das aber "gefixed".

          hab ich um 13:17 Uhr schon zu spät getestet? Das Hover-Verhalten in IE8 und Firefox war völlig identisch. Abends um 22:00 Uhr in IE7 und IE6 auch.

          Weitere "signifikante" Unterschiede sieht man in der Nummerierung der Liste. IE und Opera bauen leider Mist! Hast Du noch eine Idee?

          Welche Nummerierung? Ich sehe keine :-(
          Könntest Du Screenshots zur Verfügung stellen, damit ich sehe, was Du meinst?
          Ich hätte noch einen Screenshot vom 12.10. mit der Darstellung in Firefox und IE8.

          Warum hast Du in Deinem Quelltext eine tiefe Verschachtelung von Listen für die Navigation, von denen mir alle meine Browser nur die äußerste Ebene anzeigen?

          Freundliche Grüße

          Vinzenz

          1. Lieber Vinzenz,

            Die fragliche Seite

            hab ich um 13:17 Uhr schon zu spät getestet? Das Hover-Verhalten in IE8 und Firefox war völlig identisch. Abends um 22:00 Uhr in IE7 und IE6 auch.

            Testest Du unter verschiedenen Windoof-Plattformen, oder sind diese IEs in Linux-Umgebungen?

            Welche Nummerierung? Ich sehe keine :-(
            Könntest Du Screenshots zur Verfügung stellen, damit ich sehe, was Du meinst?

            Aber klar!

            FF3.53:

            Opera 9.51 (ich hab's nie aktualisiert, da ich Opera selbst nicht nutze):

            IE8:

            Ich hätte noch einen Screenshot vom 12.10. mit der Darstellung in Firefox und IE8.

            Zeig' doch mnal her!

            Warum hast Du in Deinem Quelltext eine tiefe Verschachtelung von Listen für die Navigation, von denen mir alle meine Browser nur die äußerste Ebene anzeigen?

            Das ist noch ne Baustelle, um die ich mich kümmern möchte. Man konnte einst mittels eines Aufklapp-Mechanismus direkt zu verschiedenen Bereichen navigieren. Das CSS ist dazu momentan aber nicht in der Lage. Und ich bin mir auch noch nicht sicher, ob ich diesen Code-Overhead unbedingt weiter mit mir herumschleppen möchte, wenn man diese Klapp-Navi nicht nutzt oder nutzen kann. Eventuell erfinde ich eine Ajax-basierte Klapp-Navi, die diesen Overhead nachlädt, wenn sie ihn braucht...

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. Hallo Felix,

              Die fragliche Seite

              hab ich um 13:17 Uhr schon zu spät getestet? Das Hover-Verhalten in IE8 und Firefox war völlig identisch. Abends um 22:00 Uhr in IE7 und IE6 auch.

              Testest Du unter verschiedenen Windoof-Plattformen, oder sind diese IEs in Linux-Umgebungen?

              Verschiedene Windows-Plattformen, siehe https://forum.selfhtml.org/?t=191588&m=1277830:

              IE8 (64Bit, Vista SP2, 32Bit, Windows XP SP3), IE7 (Windows XP SP3), IE6 (Windows XP SP3)
              Firefox 3.5.3 (Vista SP2, XP SP3), 3.0.12 (XP SP3)
              Opera 10.00 (XP SP3)
              Safari 4.0.3 (XP SP3)

              Welche Nummerierung? Ich sehe keine :-(
              Könntest Du Screenshots zur Verfügung stellen, damit ich sehe, was Du meinst?

              Aber klar!

              FF3.53:

              Opera 9.51 (ich hab's nie aktualisiert, da ich Opera selbst nicht nutze):

              IE8:

              Jetzt sehe ich endlich, was Du meinst. Ich bin nicht auf die Idee gekommen, mir ein Diktat anzeigen zu lassen, deswegen schrieb ich in meiner ersten Antwort:

              Welche Hover-Effekte werden in Deinem IE8 nicht angezeigt?
              Ich sehe im Firefox nur welche bei Brotkrümel-Navigation und Navigation am linken Rand - und die funktionieren im IE8 ganz genau so.

              Da helfen Dir meine alten Screenshots nichts. Sie hätten allerdings Dir schneller gezeigt, dass ich die eigentliche Problemstelle noch nicht entdeckt hatte.

              Freundliche Grüße

              Vinzenz

  2. Hallo, Felix!

    Ich habe die starke Vermutung, dass bei Opera/MSIE das :hover nur beim direkten Überfahren mit der Maus zutrifft, d.h. sobald man auf dem span ist, ist man nicht mehr auf dem darüberliegenden a-Element.

    An Deiner Stelle würde ich auf das Span verzichten und stattdessen mit negativem text-indent oder ähnlichen Attributen arbeiten, um die Lösung zu verstecken.

    Gruß, LX

    --
    RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
    RFC 1925, Satz 11a: Siehe Regel 6a
    1. Lieber LX,

      Ich habe die starke Vermutung, dass bei Opera/MSIE das :hover nur beim direkten Überfahren mit der Maus zutrifft, d.h. sobald man auf dem span ist, ist man nicht mehr auf dem darüberliegenden a-Element.

      diese Vermutung scheint nicht den Tatsachen gerecht zu werden... sowohl IE als auch Opera haben mit dem "Verlassen" des <a>-Elements hin in sein Kindelement kein Problem.

      An Deiner Stelle würde ich auf das Span verzichten und stattdessen mit negativem text-indent oder ähnlichen Attributen arbeiten, um die Lösung zu verstecken.

      Ich kann offensichtlich bei meinem <span> bleiben. Mit dem befüllten href-Attribut (href="javascript:;") im übergeordneten <a> reagieren beide Browser wie gewünscht.

      Es bleibt aber in IE bzw. Opera das Problem mit der Anzeige der Nummerierung. Hättest Du da eine Idee?

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
  3. Hallo Felix,

    hat dein a ein href? Ich glaube, hover funktioniert im IE nur bei a mit href. Vielleicht ist mein Wissen aber auch nur veraltet.

    Gruß, Jürgen

    1. Hallo,

      Ich glaube, hover funktioniert im IE nur bei a mit href. Vielleicht ist mein Wissen aber auch nur veraltet.

      wie man's nimmt: Es trifft auf IE bis Version 6 exakt zu. :-)
      Damit ließe sich die Aussage von Felix erklären, "dass der Hover-Effekt [...] im IE nicht klappt".

      Ciao,
       Martin

      --
      F: Was ist schneller: Das Licht oder der Schall?
      A: Offensichtlich der Schall. Wenn man den Fernseher einschaltet, kommt immer erst der Ton, und dann erst das Bild.
      1. [latex]Mae  govannen![/latex]

        Ich glaube, hover funktioniert im IE nur bei a mit href. Vielleicht ist mein Wissen aber auch nur veraltet.

        wie man's nimmt: Es trifft auf IE bis Version 6 exakt zu. :-)
        Damit ließe sich die Aussage von Felix erklären, "dass der Hover-Effekt [...] im IE nicht klappt".

        Genau das wird Felix' (bzw. IE6') Problem sein. Vor dem gleichen Problem stand ich gerade auch erst.

        Ich habe mich für die "unschöne" Variante mit einem coditional comment[1] entschieden, alternativ reicht die Version mit href="javascript:;"

        Cü,

        Kai

        [1]

        <!--[if lt IE 7]><a class="helpbox" href="javascript:;"><![endif]-->  
        <!--[if gt IE 6]><!--><a class="helpbox"><!--<![endif]-->
        
        --
        A workaround for an avoidable problem often adds clutter and overhead to the program which
        could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
        Foren-Stylesheet Site Selfzeug JS-Lookup
        SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
        1. [latex]Mae  govannen![/latex]

          Genau das wird Felix' (bzw. IE6') Problem sein. Vor dem gleichen Problem stand ich gerade auch erst.
          alternativ reicht die Version mit href="javascript:;"

          Ach ja, was vielleicht noch wichtig wäre:

          IE6 hatte sich *trotzdem* noch geweigert, zu hovern, bis ich ihm zusätzlich per

          * html .helpbox:hover {  
          	background-color: #FFFFF5;  
          } 
          

          eine aufs Maul gegeben habe.

          zoom: 1 oder height: 1% funktioniert auch, halt alles was hasLayout triggert.

          Cü,

          Kai

          --
          A workaround for an avoidable problem often adds clutter and overhead to the program which
          could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
          Foren-Stylesheet Site Selfzeug JS-Lookup
          SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
    2. Lieber JürgenB,

      Ich glaube, hover funktioniert im IE nur bei a mit href.

      Dein Tipp hat mir sehr geholfen! Danke Dir. Mit einem sinnfrei befüllten href-Attribut hovern sowohl IE(8) als auch Opera wie gewünscht.

      Wenn Du mir nun noch einen Tipp hättest, wie ich die Nummerierung in den beiden Browsern "reparieren" könnte, dann wäre ich noch glücklicher. :-)

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Hallo Felix,

        Wenn Du mir nun noch einen Tipp hättest, wie ich die Nummerierung in den beiden Browsern "reparieren" könnte, dann wäre ich noch glücklicher. :-)

        ich bin kein CSS-Experte und ich habe z.Zt. auch keinen IE8 zur Verfügung, daher nur eine Regel, an die ich mich halte:

        wenn ich bei Listen irgendetwas an der Positionierung oder an den Abständen ändere, dann alles bei OL/UL und bei LI. Auch wenn Listen in allen Browsern in etwa gleich aussehen, haben sie doch unterschiedliche Defaultwerte. Was der eine mit margin macht, macht der andere mit padding. Auch Textabstände haben da (glaube ich) unterschiedliche Werte. Der eine stellt die Abstände im OL/UL ein, der andere im LI.

        Gruß, Jürgen

        1. Lieber JürgenB,

          wenn ich bei Listen irgendetwas an der Positionierung oder an den Abständen ändere, dann alles bei OL/UL und bei LI.

          werde mir das mal reinziehen. Vielleicht kann ich die Defaults ja alle "gleichschalten"...?

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. Hallo Felix,

            wenn ich bei Listen irgendetwas an der Positionierung oder an den Abständen ändere, dann alles bei OL/UL und bei LI.

            werde mir das mal reinziehen. Vielleicht kann ich die Defaults ja alle "gleichschalten"...?

            ... wie es in den diversen Reset-Stylesheets geschieht.

            Freundliche Grüße

            Vinzenz

  4. Nachtrag.

    Einen ganz herzlichen Dank an alle für ihre hilfreichen Antworten!

    Die fragliche Seite

    Nachdem ich <li><a href="javascript:;"><span>Lösung</span></a></li> notiere, hovern nun brav Opera und IE8 (mit anderen IE-Versionen habe ich noch nicht zufriedenstellend testen können, denn multiple IE unter Windoof ist ja nicht 100%ig)...

    Ein Schönheitsfehler aber bleibt: Sowohl in Opera, als auch in IE(8) wird die Nummerierung der Liste nicht korrekt dargestellt (man vergleiche hierzu FF oder Webkit). Ich bin mit meinen CSS-Künsten am Ende. Wer weiß noch Rat?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Hi,

      Ein Schönheitsfehler aber bleibt: Sowohl in Opera, als auch in IE(8) wird die Nummerierung der Liste nicht korrekt dargestellt (man vergleiche hierzu FF oder Webkit). Ich bin mit meinen CSS-Künsten am Ende. Wer weiß noch Rat?

      Gib den Links in de LI kein block, sondern inline-block - das hilft für Opera.

      Für den IE hab ich gerade auch keine Idee.

      MfG ChrisB

      --
      Light travels faster than sound - that's why most people appear bright until you hear them speak.
      1. Lieber ChrisB,

        Gib den Links in de LI kein block, sondern inline-block - das hilft für Opera.

        danke für Deinen Hinweis. Ich wollte ihn auch gleich umsetzen, musste aber feststellen, dass meine <li>s kein display:block haben. Nur ein float:left. Das <a>-Element darinnen aber hat block, jedoch benötige ich das auch.

        Als ich mit der display-Eigenschaft der <li>s herumspielte, musste ich feststellen, dass die Nummerierung sofort im FF auch noch verschwindet, wenn display nicht mehr auf http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=list-item lautet.

        Schade! Das hätte die Lösung sein können!

        Für den IE hab ich gerade auch keine Idee.

        Hmm. Soviel zu bestandenem Acid-3 Test (oder war's der 2er?)...

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Hi,

          Gib den Links in de LI kein block, sondern inline-block - das hilft für Opera.

          danke für Deinen Hinweis. Ich wollte ihn auch gleich umsetzen, musste aber feststellen, dass meine <li>s kein display:block haben. Nur ein float:left. Das <a>-Element darinnen aber hat block, jedoch benötige ich das auch.

          Ich schrieb doch, den Links *in* den LI.
          (Das fehlende n war doch wohl nicht soo sinnentstellend?)

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
          1. Lieber ChrisB,

            Ich schrieb doch, den Links *in* den LI.

            klasse!!! Das löst das Problem im IE8 und auch in Opera, während FF und Webkit weiterhin anstandslos die gewünschte Anzeige beibehält. Spitze!

            Wenn ich wieder in der Schule bin, werde ich IE6 testen, für den ich gesonderte Stylesheets per CC einbinden kann, um Fehler korrigieren zu können. Aber da sehe ich dann weiter.

            Ganz herzlichen Dank!

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    2. und IE8 (mit anderen IE-Versionen habe ich noch nicht zufriedenstellend testen können, denn multiple IE unter Windoof ist ja nicht 100%ig)...

      Multiple IE ist doof, Microsoft dafür ausnahmsweise mal cool.

      1. Hallo,

        Multiple IE ist doof, Microsoft dafür ausnahmsweise mal cool.

        Schaut erstmal gut aus, aber mit "Expires January 1, 2010" scheint das auch keine überzeugende Lösung zu sein. Oder sollen die Dateien wenigstens bis zum Support-Ende von XP, also vmtl. 2014, immer wieder von Microsoft aktualisiert werden?

        Grüsse

        Cyx23

        1. Schaut erstmal gut aus, aber mit "Expires January 1, 2010" scheint das auch keine überzeugende Lösung zu sein. Oder sollen die Dateien wenigstens bis zum Support-Ende von XP, also vmtl. 2014, immer wieder von Microsoft aktualisiert werden?

          Microsoft aktualisiert die Images rechtzeitig und Du kannst Dir an genannter Stelle jeweils neue runterladen, die dann ca. 1/2 Jahr gültig bleiben. Aber unter uns: Der einzige Nachteil, der mir bei abgelaufenen Instanzen bislang untergekommen ist der, daß die Dinger einen damit nerven ;-)

          Im übrigen geht es hier nicht nur um XP. Vista Images sind auch am Start.

          1. Hallo,

            Microsoft aktualisiert die Images rechtzeitig und Du kannst Dir an genannter Stelle jeweils neue runterladen, die dann ca. 1/2 Jahr gültig bleiben. Aber unter uns: Der einzige Nachteil, der mir bei abgelaufenen Instanzen bislang untergekommen ist der, daß die Dinger einen damit nerven ;-)

            Das scheint dann doch eine recht nützliche Sache zu sein.

            Im übrigen geht es hier nicht nur um XP. Vista Images sind auch am Start.

            Mir würde derzeit erstmal XP reichen, Vista habe ich ausgelassen und Windows 7 hat noch etwas Zeit, auch wenn es Vorteile haben mag, mehr als 3 GB RAM nutzen zu können.

            Allerdings konnte ich beim Besuch bei microsoft erstmal kein passendes Virtualisierungspaket finden, Windows XP Mode für Windows 7 paßt ja nicht so ganz, da muß ich nochmal etwas suchen.

            Grüsse

            Cyx23

            1. Allerdings konnte ich beim Besuch bei microsoft erstmal kein passendes Virtualisierungspaket finden, Windows XP Mode für Windows 7 paßt ja nicht so ganz, da muß ich nochmal etwas suchen.

              Ja, ist wohl jetzt etwas versteckt. Rechts oben steht da "Looking for Virtual PC 2007?":
              http://www.microsoft.com/windows/virtual-pc/support/virtual-pc-2007.aspx

              1. Hallo,

                Ja, ist wohl jetzt etwas versteckt. Rechts oben steht da "Looking for Virtual PC 2007?":
                http://www.microsoft.com/windows/virtual-pc/support/virtual-pc-2007.aspx

                Danke, schaut gut aus.

                Grüsse

                Cyx23