none
CSS Treeview funktioniert nicht in IE11 auf Win10

    Frage

  • Ich habe ein Problem mit dem Internet Explorer.
    Wir haben ein simple CSS Treeview.
    Sie funktioniert im Edge, Chrome, Firefox und IE mit der Buildnummer (11.0.9600.18860).
    Nur unter dem IE in Windows 10 (Buildnummer 11.786.15063.0) funktioniert der CSS Code nicht.
    Was muss ich tun damit das CSS in dieser Browserversion funktioniert? Ist das Problem bekannt?

    Das Problem habe ich mal in 2 kleine Codeblöcke extrahiert.

    CSS

    /* Just some base styles not needed for example to function */
    html {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #000000;
        background-color: #FDF2DE;
        font-size: 14px;
    }
    
    /* CSS Tree menu styles */
    ol.tree {
        padding: 0 0 0 15px;
        width: 98%;
    }
    
    li {
        ;
        list-style: none;
    }
    
        li input {
            ;
            opacity: 0;
            cursor: pointer;
            width: 16px;
        }
    
            li input + ol > li {
                display: none;
            }
    
            li input:checked + ol > li {
                display: block;
            }
    
                li input:checked + ol > li:last-child {
                    margin-bottom: 15px;
                }
    
        li label {
            cursor: pointer;
            display: block;
        }
    
    .treeview_themenbereich {
        background-color: #EDA412;
        color: #504F49;
        padding-left: 30px;
        text-align: left;
        font-size: 16px;
        cursor: pointer;
        padding-top: 2px;
        padding-bottom: 4px;
        border-bottom: 1px solid #504F49;
    }
    
    .treeview_thema {
        background-color: #725113;
        color: #F8DCA5;
        padding-left: 30px;
        text-align: left;
        cursor: pointer;
        padding-top: 2px;
        padding-bottom: 4px;
        border-bottom: 1px solid #F8DCA5;
    }
    
    .treeview_themendetails_beschriftung {
        font-weight: bold;
        margin-top: 10px;
        margin-left: 7px;
        margin-bottom: 10px;
    }
    
    .treeview_themendetails_wert {
        margin-left: 7px;
    }

    HTML Seite

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link href="./style_kunde.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
            <div class="webseite">
                <div class="body">
                    <div class="body_mitte">
                        <ol class="tree">
                            <li>
                                <label class="treeview_themenbereich" for="AllgemeineThemen">Allgemeine Themen</label><input type="checkbox" checked id="AllgemeineThemen" /><ol>
                                    <li>
                                        <label class="treeview_thema" for="BS">Brandschutz-Übung</label>
                                        <input type="checkbox" checked id="BS" /><ol>
                                            <li>
                                                <div class="treeview_themendetails_beschriftung">Kürzel</div>
                                                <div class="treeview_themendetails_wert">BS</div>
                                                <div class="treeview_themendetails_beschriftung">Dauer</div>
                                                <div class="treeview_themendetails_wert">1</div>
                                            </li>
                                        </ol>
                                    </li>
                                    <li>
                                        <label class="treeview_thema" for="EH">Erste-Hilfekurs</label>
                                        <input type="checkbox" checked id="EH" /><ol>
                                            <li>
                                                <div class="treeview_themendetails_beschriftung">Kürzel</div>
                                                <div class="treeview_themendetails_wert">EH</div>
                                                <div class="treeview_themendetails_beschriftung">Dauer</div>
                                                <div class="treeview_themendetails_wert">1</div>
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
    					</ol>
                    </div>
                </div>
            </div>
    </body>
    </html>

    Erwartetes Ergebnis

    Die Treeview Struktur ist komplett "aufgeklappt" (eingeblendet). Bei einem Klick auf "Erste-Hilfekurs" und "Brandschutzübung" werden die Inhalte Kürzel und Dauer ein-/ausgeblendet.

    Bei dem Klick auf "Allgemeine Themen" werden "Erste-Hilfekurs" und "Brandschutzübung"  und deren Inhalte ein-/ausgeblendet.

    Tatsächliches Ergebnis

    Die Treeview Struktur ist komplett "zugeklappt" (ausgeblendet). Es wird die Input Checkbox angezeigt.

    Bei einem Klick auf "Allgemeine Themen" wird nichts ein/ausgeblendet sondern nur in der Checkbox der Haken gesetzt oder entfernt.




    Freitag, 22. Dezember 2017 08:46

Antworten

  • Hallo Oliver,

    das wird dann evtl. daran liegen, dass im IE der Kompatibilitätsmodus so eingestellt ist, dass Intranet Sites automatisch in diesem laufen. Schalt das mal aus.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert OliverKaiser Mittwoch, 27. Dezember 2017 08:04
    Freitag, 22. Dezember 2017 16:49

Alle Antworten

  • Hallo Oliver,

    "funktioniert nicht" ist leider nichts, mit dem wir auch nur irgendwas anfangen könnten.

    Was genau "funktioniert nicht"? Wie sollte es aussehen? Vergleichende Screenshots wären hilfreich.

    Bei mir sieht das auch in IE 11 unter Windows 10 genauso aus wie unter Firefox, ... (extra noch Windows 10 aktualisiert, damit ich dieselbe IE Version habe).

     


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community


    • Bearbeitet Stefan Falz Freitag, 22. Dezember 2017 09:50
    Freitag, 22. Dezember 2017 09:18
  • Hallo Stefan,

    Erwartetes Ergebnis

    Die Treeview Struktur ist komplett "aufgeklappt" (eingeblendet). Bei einem Klick auf "Erste-Hilfekurs" und "Brandschutzübung" werden die Inhalte Kürzel und Dauer ein-/ausgeblendet.

    Bei dem Klick auf "Allgemeine Themen" werden "Erste-Hilfekurs" und "Brandschutzübung"  und deren Inhalte ein-/ausgeblendet.

    Tatsächliches Ergebnis

    Die Treeview Struktur ist komplett "zugeklappt" (ausgeblendet). Es wird die Input Checkbox angezeigt.

    Bei einem Klick auf "Allgemeine Themen" wird nichts ein/ausgeblendet sondern nur in der Checkbox der Haken gesetzt oder entfernt.

    In deiner Umgebung ist das nicht aufgetreten?

    PS: Leider darf ich noch keine Links und Bilder posten da das Konto noch nicht freigegeben wurden.

    Freitag, 22. Dezember 2017 11:13
  • Hallo Oliver,

    ich kann dir nur sagen, dass sich das bei mir genauso darstellt wie von dir erwartet.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Freitag, 22. Dezember 2017 14:22
  • Hallo Stefan,

    danke für deine bisherige Mühe.

    Da es bei dir funktioniert habe ich die Umgebung genauer analysiert und folgende Feststellung gemacht.

    - Die Seite ohne Websever direkt im Browser funktioniert

    - Mit IIS und Apache im Intranet funktioniert nicht

    - Mit IIS im Internet funktioniert es

    Hast du vielleicht eine Idee? Es scheint mir fast so als hätte es was mit dem Intranet zu tun.

    Oliver

    Freitag, 22. Dezember 2017 15:56
  • Hallo Oliver,

    das wird dann evtl. daran liegen, dass im IE der Kompatibilitätsmodus so eingestellt ist, dass Intranet Sites automatisch in diesem laufen. Schalt das mal aus.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert OliverKaiser Mittwoch, 27. Dezember 2017 08:04
    Freitag, 22. Dezember 2017 16:49
  • Hallo Oliver,

    ich hab es grade mal probiert, liegt wirklich an der (IMHO zumindest auf die automatische Ansicht ziemlich unnötigen) Kompatibilitätsansicht.

    Deaktivier das daher (zumindest für Intranetsites), dann läuft es.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Freitag, 22. Dezember 2017 22:11
  • Hallo Stefan,

    bei mir funktioniert es auch wenn ich es abschalte. Da war der Kompatibilitätsmodus wohl nicht kompatibel :)

    Mittwoch, 27. Dezember 2017 08:05