Matze: Links werden im IE mit Maus nicht erkannt

Hallo,

ich bin gerade auf einen, mir völlig neuen, Bug des IE gestossen.
Ich habe mehrere Divs ineinander verschachtelt,
einigen Position- und Z-Index-Angaben gegeben usw. usf.

Jedenfalls ignoriert mein IE6 die Links in den Contentbox und Contentmainbox-Containern
wenn ich versuche sie mit der Maus anzuklicken.

Nun weiß ich nicht ob das ein Bug des IE ist, oder ob die anderen Browser (Firefox, Netscape, Opera)
einfach so nett sind richtig zu erraten was ich will.

Da ich auch absolut keinen Anhaltspunkt habe woran es liegen kann,
muss ich auch leider den kompletten Quelltext posten...

CSS Teil:
[lang code=CSS]
body{
 font-family:Verdana;
 font-size:0.8em;
 color:#00004B;
 background:url(layout/bg.jpg) repeat-x #B5B5B5;
 text-align:center;
 margin:0;
 position:relative;}
#mainbox{
 margin:0 auto;
 width:887px;
 text-align:left;}
#contentbox{
 position:absolute;
 font-size:11px;
 background:url(layout/headbg.png);
 margin-left:169px;
 height:247px;
 width:698px;
 z-index:1;}
* html #contentbox{
 background-image:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='layout/headbg.png');}
#leftnavi{
 color:#E6EEF4;
 position:absolute;
 margin:0 auto;
 padding-top:194px;
 background:url(layout/left.jpg) no-repeat;
 text-align:right;
 width:189px;
 height:428px;
 top:32px;
 z-index:0;}
#contentmainbox{
 overflow:auto;
 position:absolute;
 background:url(layout/mainbg.png);
 margin-left:169px;
 margin-top:247px;
 height:403px;
 width:698px;
 z-index:2;}
* html #contentmainbox{
 background-image:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='layout/mainbg.png');}
[/lang]

Und der HTML Teil:

[lang code=HTML]
<body>
 <div id="mainbox">
  <div id="leftnavi">/*funktionierende Links*/</div>
  <div id="contentbox">/*nicht funktionierende Links*/</div>
  <div id="contentmainbox">/*auch nicht funktionierende Links*/</div>
 </div>
</body>
[/code]

Ich hoffe ihr könnt mir sagen was ich falsch gemacht habe,
oder wie ich dieses Problem umgehen kann.

Danke und Grüße, Matze

  1. Hi,

    Nun weiß ich nicht ob das ein Bug des IE ist, oder ob die anderen Browser (Firefox, Netscape, Opera)
    einfach so nett sind richtig zu erraten was ich will.

    entferne doch testweise mal die MS-proprietäre filter-Eigenschaft. Dann dürftest Du klarer sehen.

    Da ich auch absolut keinen Anhaltspunkt habe woran es liegen kann,

    Schritt Nummer Eins bei *jedem* Problem: Validiere die Codes. Damit sind die meisten Fehlerquellen ausgeschlossen. In Deinem Fall wäre damit beispielsweise das Problem bereits verschwunden.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo,

      entferne doch testweise mal die MS-proprietäre filter-Eigenschaft. Dann dürftest Du klarer sehen.

      Nicht wirklich. Ohne den Filter gehen zwar die Links,
      allerdings 'müssen' die PNG's auch im IE6 tranzparent sein.

      Schritt Nummer Eins bei *jedem* Problem: Validiere die Codes. Damit sind die meisten Fehlerquellen ausgeschlossen. In Deinem Fall wäre damit beispielsweise das Problem bereits verschwunden.

      "Das Dokument ist valides
      XHTML 1.0 Transitional"

      Was anderes hätte mich auch gewundert ;)
      Damit ist das Problem aber noch nicht behoben :(

      Grüße, Matze

      1. hallo,

        "Das Dokument ist valides
        XHTML 1.0 Transitional"

        Das ist das Ergebnis des HTML-Validators. Der kümmert sich aber nicht um dein CSS. Es gibt auch einen CSS-Validator, und den solltest du befragen, wenn das Problem, wie du richtigerweise vermutest, dein CSS ist.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
      2. Hi Matze,

        bißchen schade, dass du alles gepostet hast, nur die nicht-funktionierenden Links nicht ;-) Aber unabhängig davon kann ich mich erinnern, irgendwann mal Probleme mit Links auf transparenten PNGs gehabt und das dann gelassen zu haben. Und insofern

        Ohne den Filter gehen zwar die Links,

        hatte Cheatah da ja schon Recht.

        Damit ist das Problem aber noch nicht behoben :(

        Aber erkannt und die einzige Lösung wird wohl sein, ohne PNGs auszukommen :-(

        Gifs entsprechend schneiden ist nicht drin?

        Gruß
        Antipitch

        1. Hi Matze,

          bißchen schade, dass du alles gepostet hast, nur die nicht-funktionierenden Links nicht ;-)

          die waren nicht relevant. Da steht nur <a href="">Hund</a> als Platzhalter.

          Aber unabhängig davon kann ich mich erinnern, irgendwann mal Probleme mit Links auf transparenten PNGs gehabt und das dann gelassen zu haben.(...)
          Aber erkannt und die einzige Lösung wird wohl sein, ohne PNGs auszukommen :-(

          Mist, genau diese Antwort wollte ich nicht hören.

          Gifs entsprechend schneiden ist nicht drin?

          Leider nicht, deswegen ja png's. :(

          Evtl. könnte ich mal ein Screenshot des Layouts posten und es hat jemand eine bessere Idee.
          Ich arbeite dran.

          Grüße, Matze

          PS: Sry, ein bisschen verpeilt. Dass das CSS nicht valide ist weiß ich. Code von Jeena.

          1. Hallo,

            ok, ihr könnt euch das Layout Hier herunter laden (jpg).

            Ich wäre für ziemlich dankbar wenn mir jemand einen Vorschlag machen könnte.

            Grüße, Matze

            1. Hi Matze,

              also dafür bräuchtest du nicht unbedingt PNGs (Grund sind die Schatten, right?). Z.B. das PNG in der mainbox: Schatten über der Navi kommt in das Hintergrundbild der Navi und die kriegt den höheren z-index. Schatten der Navi schneidest du passend für deinen body Hintergrund. Etc pp...

              Allerdings gibts wohl Lösungen für dein Problem, guck mal hier: Super-Easy Blendy Backgrounds Gegen Ende des Textes kommt Matthew O'Neill auf den Bug zu sprechen und löst das (und verweist auch noch hier hin: http://www.hrunting.org/csstests/iealpha.html).

              Damit solltest du hinkommen, brauchst du nicht alles ändern ;-)

              Gruß
              Antipitch

              PS: Auf A list apart gibts auch interessante Atikel über css-Techniken für Schatten.

              1. Hallo,

                Allerdings gibts wohl Lösungen für dein Problem, guck mal hier: Super-Easy Blendy Backgrounds Gegen Ende des Textes kommt Matthew O'Neill auf den Bug zu sprechen und löst das (und verweist auch noch hier hin: http://www.hrunting.org/csstests/iealpha.html).

                Damit solltest du hinkommen, brauchst du nicht alles ändern ;-)

                Danke. Aber gibts das auch auf deutsch?
                Ich komm sicher auch mit der englischen Anleitung ganz gut klar,
                aber ich frag mich immer wieder warum hier bevorzugt englisch-sprachige Seiten verlinkt werden.

                Eine andere Positionierung für die Elemente kommt in dem Layout leider nicht in Frage, sonst müsste ich es komplett umschreiben,
                was ich eigentlich vermeiden will, da mir der Quelltext ansonsten
                ganz gut gefällt. Barrierefreiheit mal aussen vor gelassen.

                PS: Auf A list apart gibts auch interessante Atikel über css-Techniken für Schatten.

                Und wieder auf englisch. Danke trotzdem!
                Ich werde mir beide Seiten mal durchlesen.

                Grüße, Matze

                1. Moin Matze,

                  zweisprachig unterwegs, vergess ich manchmal, sorry.

                  Generell würde ich aber empfehlen, sich das lesen von Fachartikeln auf Englisch anzugewöhnen. Es stehen einem einfach mehr und mitunter aktuellere Informationen zur Verfügung, weil -wie in vielen anderen Wissenschaften/ Fachgebieten auch- die internationale Fachsprache nun mal Englisch ist. Mit Sympathie für oder Aversion gegen irgendeine Sprache an sich sollte das meiner Meinung nach nichts zu tun haben.

                  Das soll natürlich nicht heißen, dass man nicht zuerst in in der eigenen Sprache suchen soll. Aber für dieses Beispiel hatte ich in englischer Sprache direkt ein, zwei gute Sachen bei der Hand. Google Ergebnisse auf deutsch waren dagegen doch stark abfallend.

                  Hoffe hilft trotzdem/ anyway ;-)

                  Gruß
                  Antipitch

                  1. Hallo,

                    Hoffe hilft trotzdem/ anyway ;-)

                    Zumindest weiß ich jetzt, dass es eine Möglichkeit gibt,
                    diese mir aktuell aber nichts bringt weil ich die Grafiken auf biegen und brechen nicht ändern will ^^
                    Leider fällt dadurch die beschriebene position:static für das Element mit dem PNG und position:relativ für den Link weg.

                    Ich hoffe auf eine JavaScript-Lösung ;)
                    Ansonsten muss ich tatsächlich das ganze Konzept über den Haufen werfen,
                    muss die Grafiken anders zerlegen und z.B. JPG's benutzen.

                    Danke und Grüße, Matze

          2. Servus,

            Aber erkannt und die einzige Lösung wird wohl sein, ohne PNGs auszukommen :-(
            Mist, genau diese Antwort wollte ich nicht hören.

            Wenn du die betroffenen Links relativ positionierst, funktionieren sie unter der Bedingung, dass das Element, auf welches der Filter angewandt wird, statisch positioniert ist (Das ist in der MSDN Knowledge Base dokumentiert, ich konnte den entsprechenden Eintrag allerdings gerade leider nicht finden).
            Sollte allerdings eine der beiden Bedingungen (Link relativ bzw. Element mit filter statisch) aus anderen Layout-bedingten Gründen nicht anwendbar sein, hast du keine Chance, ausser auf ein alternatives Grafikformat auszuweichen oder IE6-Nutzer zu vergraulen.

            Gruss
            Patrick

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

          Damit ist das Problem aber noch nicht behoben :(
          Aber erkannt und die einzige Lösung wird wohl sein, ohne PNGs auszukommen :-(

          nicht unbedingt: Das Problem basiert auch auf dem Umstand, dass das linkenthaltende Element mit dem Filter verunstaltet wurde. Träfe dies auf ein anderes Element zu, bestünde das Problem nicht zwingend. Da es Unsinn ist, wegen irgendwelcher Layoutwünsche den HTML-Code umzumodelieren (Stichwort "Tabellenlayout"), bietet sich eine generische Lösung per JavaScript an, die für veraltete IEs die von ihm benötigten Elemente erzeugt.

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. Moin Cheatah,

            bietet sich eine generische Lösung per JavaScript an, die für veraltete IEs die von ihm benötigten Elemente erzeugt.

            ginge natürlich auch, keine Frage.

            Da es Unsinn ist, wegen irgendwelcher Layoutwünsche den HTML-Code umzumodelieren (Stichwort "Tabellenlayout")

            Gott bewahre... Scheint aber Lösungen für den Bug via Positionierung zu geben (vgl. shn's Posting oder mein zweites). Hatte mir Matze's Design auch mal angesehen und das ginge auch per css und mit GIFs oder JPGs (und auch ohne absolute Postionierung).

            Gruß
            Antipitch

            1. Hallo,

              Gott bewahre... Scheint aber Lösungen für den Bug via Positionierung zu geben (vgl. shn's Posting oder mein zweites). Hatte mir Matze's Design auch mal angesehen und das ginge auch per css und mit GIFs oder JPGs (und auch ohne absolute Postionierung).

              Sicher könnte ich die Grafiken anders zerlegen, aber das wollte ich vermeiden.
              Ich würde die JavaScript-Lösung bevorzugen wenn mir jemand dabei helfen kann.

              Wieviel User nutzen den IE6 schätzungsweise überhaupt noch?
              Bei einer relativ stark besuchten Seite von mir kommt der IE6 nach dem Firefox immerhin noch an zweiter Stelle gefolgt vom IE7 und Opera.

              Im IE7 funktionieren die Links meines Wissens nach, kann es aber nicht
              testen weil ich den IE7 nicht installiert habe.

              Grüße, Matze

              1. Hi

                Wieviel User nutzen den IE6 schätzungsweise überhaupt noch?

                Das kommt extrem auf dein Zielpublikum an. Generell kannst du aber davon ausgehen, das du zum jetzigen Zeitpunkt den IE6 definitiv nicht vernachlässigen kannst. Es benutzen vermutlich immer noch mehr Leute den 6er als den 7er.

                Such mal bei Google nach z.b. "Browser Survey".

                Andere Quellen:
                http://www.w3schools.com/browsers/browsers_stats.asp

                gruss

                lightfly

                1. Hallo,

                  Das kommt extrem auf dein Zielpublikum an. Generell kannst du aber davon ausgehen, das du zum jetzigen Zeitpunkt den IE6 definitiv nicht vernachlässigen kannst. Es benutzen vermutlich immer noch mehr Leute den 6er als den 7er.

                  Danke, dachte ich es mir doch.
                  Allein in der Firma, für die die Seite wird ist überall der IE6 und Windows 2000 installiert.
                  Da kommt es schon doof wenn sie nirgends läuft wie gewollt.

                  Wie gesagt hätte ich gern einen Ansatzpunkt für die von Cheatah vorgeschlagene JavaScript-Lösung.
                  Könnte mir da jemand einen Tipp geben?

                  Danke und Grüße, Matze

                  1. Hi,

                    Allein in der Firma, für die die Seite wird ist überall der IE6 und Windows 2000 installiert.

                    jupp, und natürlich kommt das auf die Zielgruppe an. Auf heise.de weist die aktuelle Statistik zwar nur insgesamt ~15% IE6-User aus, aber effektiv sind es etwa die Hälfte mehr als IE7-User.

                    Wie gesagt hätte ich gern einen Ansatzpunkt für die von Cheatah vorgeschlagene JavaScript-Lösung.
                    Könnte mir da jemand einen Tipp geben?

                    Schritt 1: Ermitteln des gewünschten Ergebnisses.
                    Erzeuge (ohne JavaScript, in reiner Tipp-Arbeit) den HTML- und CSS-Code, der im IE6 vorliegen muss, um das Problem zu lösen. Du wirst (mindestens) ein neues HTML-Element benötigen, welches die filter-Eigenschaft besitzt, absolut positioniert ist, die richtige Größe und Position hat usw.

                    Schritt 2: Finde die betroffenen Elemente.
                    Durchsuche mit JavaScript den DOM-Baum auf sinnvolle Art, so dass Du am Ende die zu bearbeitenden Elemente vorliegen hast. Hierbei wirst Du u.a. das Stichwort "computedStyle" benötigen.

                    Schritt 3: Bearbeite alle in Schritt 2 gefundenen Elemente, so dass sie dem in Schritt 1 definierten Ziel entsprechen.
                    Du wirst hierzu eine Vielzahl von DOM-Methoden benötigen, die Du insbesondere im document- und node-Objekt findest.

                    Beschränke die Ausführung dieses Scripts auf die betroffenen IE-Versionen.

                    Cheatah

                    --
                    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                    X-Will-Answer-Email: No
                    X-Please-Search-Archive-First: Absolutely Yes
          2. Hallo,

            Da es Unsinn ist, wegen irgendwelcher Layoutwünsche den HTML-Code umzumodelieren (Stichwort "Tabellenlayout"), bietet sich eine generische Lösung per JavaScript an, die für veraltete IEs die von ihm benötigten Elemente erzeugt.

            Könntest du mir dabei helfen? Ich habe von JavaScript leider ziemlich wenig Ahnung und wüsste jetzt keinen Ansatzpunkt.

            Grüße, Matze

    2. Hallo Cheatah,

      entferne doch testweise mal die MS-proprietäre filter-Eigenschaft. Dann dürftest Du klarer sehen.

      Ist es richtig wenn ich davon ausgehe, dass die Links im IE dann 'unter' dem Bild liegen?
      Kann ich das irgendwie beheben?

      Grüße, Matze

  2. Hallo,

    ich habe es mit Jeenas Beispielen mittlerweile hin gekriegt,
    dass ich die Links im oberen Teil funktionieren.
    Das Problem vor dem ich jetzt noch stehe ist,
    wie ich einen Hintergrund mit repeat-y tranzparent krieg.
    Ich könnte zwar auch ein einzelnes großes Hintergrundbild nehmen,
    aber das bedeutet wieder mehr Ladezeit.

    Wenn dazu noch jemand eine Idee hat, wär ich sehr dankbar.

    Grüße, Matze