Links funktionieren nicht im IE11

birkenfrank

Hallo Forum,

ich habe eine Webside geschrieben, bei der im IE11 die Links und das Script easyComment zwischen <main> und </main> nicht funktionieren. Die Links außerhalb davon (z.B. in der Navileiste) funktionieren. Hat jemand eine Idee, wo der Fehler liegen könnte?

Hier der Code:[INDENT]

HTML

<!DOCTYPE html><html lang="de"><head>  <title>Holismus</title>  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link type="text/css" rel="stylesheet" media="screen" href="design.css"></head><body>    <div id="aside">        <header>                </header>        <div id="steuerung">                 <nav>                <ul>                    <li><a href="index.php" title="Test 1">Auftakt</a></li>                    <li><a href="appell.php" title="Test 2">Appell</a></li>                </ul>            </nav>           <br>         </div>    </div>    <main id="main">        <div class="tabset">            <!-- Tab 1 -->            <input type="radio" name="tabset" id="tab1" aria-controls="tab1" checked>            <label for="tab1">              Auftakt            </label>                        <!-- Tab 2 -->            <input type="radio" name="tabset" id="tab2" aria-controls="tab2">            <label for="tab2">              Leser-Kommentare            </label>                        <div class="tab-panels">                <section id="tab1" class="tab-panel">                  <div style="text-align:left;"><i>»Nicht mehr Tier und noch nicht Engel« &nbsp; <a href="https://de.wikipedia.org/wiki/Blaise_Pascal" target="_blank" rel="noopener">Blaise Pascal</a></i></div></p>


<div><p span style="padding-top:10px;">Lorem ipsum<p>                      </div>                </section>                                <section id="tab2" class="tab-panel">


<!-- easyComment Content Div --><div id="easyComment_Content"></div>                                </section>            </div>        </div>    </main><footer>
        <!-- easyComment --><script type="text/javascript">    // CONFIGURATION VARIABLES    var easyComment_ContentID = 'Auftakt';        // CORE     var easyComment_Domain = 'http://www.denkmodelle.de/easyComment/';        /* * * DON'T EDIT BELOW THIS LINE * * */    (function() {        var EC = document.createElement('script');        EC.type = 'text/javascript';        EC.async = true;        EC.src = easyComment_Domain + 'plugin/embed.js';        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(EC);    })();</script>     </footer></body></html>

[/INDENT]
Und der zugehörige CSS-Code:

Code

* {    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




html {
    height: 100%;
    overflow: hidden;
}




body {
    background: #f6f6f6;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 13px;
}




/* typo */




p {
    margin-bottom: 18px;
}








b, strong {
    font-weight: bold;
    clear: both;
}




i {
    font-style: italic;
    clear: both;
}






/* Linkformatierungen: */




a {
    color: #1746b1;
    text-decoration: none;
}




a:hover, a:active {
    text-decoration: underline;
}






a:visited {
    color: #0d0183;
    text-decoration: none;
}




/* Listen */




nav ul {
    list-style: none;
}




/* Seitenaufteilung: */


#aside {
    width: 180px;
    float: left;
    height: calc(100vh - 77px);
    padding: 10px 0 0 0;
}




#main {
    position: relative;
    float: left;
    width: calc(100% - 180px);
    padding-top: 13px;
}




footer {
    overflow: hidden;
    text-align: right;
    padding: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}




#aside header {
    text-align: center;
    margin-bottom: 20px;
}




#aside #steuerung {
    padding-left: 22px;
    font-size: 13px;
}




/* tab-functionlity */




.tabset > input[type='radio'] {
  position: absolute;
  left: -200vw;
}




.tabset .tab-panel {
  display: none;
}




.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}




/* tab-styling */




.tabset {
    height: 100%;
}




.tab-panels {
    height: calc(100% - 110px);
    width: calc(100% - 200px);
    overflow-y: scroll;
    background: #fff;
    position: fixed;
    z-index: -1;
    border: solid 1px #acd7fb;
}




.tabset > label {
  position: relative;
  display: inline-block;
  padding: 10px 15px 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  background: #edf4fb;
  border: 1px solid #acd7fb;
  margin-bottom: -1px;
}




.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}




.tabset > input:checked + label {
  border-color: #acd7fb;
  border-bottom: 1px solid #fff;
  background: #fff;
  z-index: 10;
}




.tab-panel {
  padding: 30px;
}




/* Kommentarfunktion */




#cssxecx_c_write { 
margin:5px; 
border:none; 
background:#F4F4F4; 
padding:5px; 
} 
.cssxecx_d_row { 
padding:2px; 
} 
.cssxecx_input { 
padding:3px; 
width:200px; 
font-family:verdana, arial, helvetica, sans-serif; 
font-size:13px; 
border:#666666 1px solid; 
} 
#cssxecx_comm { 
padding:3px; 
width:400px; 
font-family:verdana, arial, helvetica, sans-serif; 
font-size:13px; 
height:120px; 
border:#666666 1px solid; 
background:#FFFFFF; 
} 
#cssxecx_submit { 
padding:3px; 
width:300px; 
font-family:verdana, arial, helvetica, sans-serif; 
font-size:13px; 
} 
#cssxecx_c_h2 { 
margin:0; 
} 
#comment_cssxecx_alert { 
background:#FF9FA2 url(http://img.webme.com/pic/n/nndesign/alert.png) no-repeat; 
background-position:10px center; 
border:#990000 1px solid; 
margin:5px; 
color:#660000; 
height:64px; 
padding:5px 5px 5px 75px; 




} 
#comment_cssxecx_loadingalert { 
background:#FFF7D5; 
border:#FFCC00 1px solid; 
color:#EC8D00; 
padding:5px; 
} 
.cssxecx_eintrag { 
margin:5px; 
background:#edf4fb; 
padding:5px; 
} 
.cssxecx_c_t { 
border-bottom:1px solid #CCCCCC; 
padding:2px; 
margin:2px; 
margin-bottom:5px; 
} 
.cssxecx_namet { 
color:#333333; 
font-weight:bold; 
font-size:14px; 
font-style:italic; 
} 
.cssxecx_time { 
color:#666666; 
font-size:10px; 
} 
.cssxecx_txt { 
padding:8px; 
}

Alles anzeigen

Keine Ahnung???

Arne Drews

Dein HTML ist kaputt! Viele Browser korrigieren das, der IE halt nicht.

birkenfrank

Aha! Wäre schon nett, zu erfahren, was da kaputt ist. Im Gegensatz zu einem kranken Körperteil kann man ja hier alles einfach ersetzen.

Bandit

Wenn du diese Buchstabenwüste mal vernünftig postest, dann sieht sich das vielleicht auch jemand mal an. Noch besser w#re ein Link zur Seite.

birkenfrank

Ich weiß nicht, wie ich das anders posten soll? Daher hier der Link: http://www.denkmodelle.de/test/ Es geht dort um den Link zu Blaise Pascal in der Wikipedia als Beispiel.

Arne Drews

Es gibt bspw. Validatoren, die auf valides HTML prüfen, die könntest Du nutzen, einfach mal googlen, sind kostenlos.

Um aber Deine Frage zu beantworten:

In der <section id="tab1" ist ein schliessendes </p>-Tag, das zuvor nie geöffnet wurde, also an der Stelle für eine fehlerhafte Struktur sorgt
Direkt darunter befindet sich ein <div> mit einem <p> als Child-Element, das nicht korrekt geschlossen wird. Du hast an der Stelle den für schließende Tags erforderlichen Slash vergessen!
Zudem befindet sich ein unbekanntes Attribut "span" im <p>-Element

Alles Dinge, die Du selber finden müsstest!
Nichts dabei, was Du bspw. hier nicht sehen könntest: https://validator.w3.org/nu/?doc=http%3…le.de%2Ftest%2F

birkenfrank

Hmmm, ich habe die Fehler, die du angegeben hast, korrigiert. Der Validator schmeißt doch viel mehr Fehler raus als du angegeben hast? Nach der Korrektur stehen dort immer noch etliche Fehler, mit denen ich (als „html-Embryo“) leider nichts anfangen kann.

Z.B. das hier: Wenn ich mir das anschaue, dann gibt es doch ein schließendes </p>???

<p><div style="text-align:left;"><i>»Nicht mehr Tier und noch nicht Engel«   <a href="https://de.wikipedia.org/wiki/Blaise_Pascal" target="_blank" rel="noopener">Blaise Pascal</a></i></div></p>

Ich gebe zu, ich habe wenig Ahnung und hoffe daher auf Hilfe aus diesem Forum.

Sailor

Du hast aber ein <div></div> mit einem <p><div></div></p> eingeschlossen - das akzeptiert der der Validator nicht.
Mache <div><p></p></div> und es sollte valide sein.
Google man nach HTML Blockelemente.

Arne Drews

Poste doch bitte Deinen aktuellen Stand komplett.
Der angezeigt Fehler kann durchaus auch entstehen, wenn anderswo kaputte Tags vorhanden sind, die diesen einschließen.

birkenfrank

Willst du jetzt wieder Buchstabenwüste? Du hast doch den Link und die Seiten sind aktuell.

Arne Drews

Solange das immer noch falsch ist, brauchen wir nicht weiter machen:

HTML

<p><span style="padding-top:10px;">Lorem ipsum</span><p>

basti1012

Also das

Code

[COLOR=#881280][FONT=monospace]<section [/FONT][/COLOR][FONT=monospace]id[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]tab1[/FONT][COLOR=#881280][FONT=monospace]" [/FONT][/COLOR][FONT=monospace]class[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]tab-panel[/FONT][COLOR=#881280][FONT=monospace]">
[/FONT][/COLOR][COLOR=#881280][FONT=monospace]<section [/FONT][/COLOR][FONT=monospace]id[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]tab2[/FONT][COLOR=#881280][FONT=monospace]" [/FONT][/COLOR][FONT=monospace]class[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]tab-panel[/FONT][COLOR=#881280][FONT=monospace]">

Da musst du die ID's ändernn weil die doppelt sind .Ids dürfen nur einmal auf einer Seite vorhanden sein.
[/FONT][/COLOR]
Dann beachte Post #8

Dann zeile 63

Code

[/FONT][/COLOR][COLOR=#881280][FONT=monospace]<script [/FONT][/COLOR][FONT=monospace]type[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]text/javascript[/FONT][COLOR=#881280][FONT=monospace]">[/FONT][/COLOR][COLOR=#881280][FONT=monospace]

kannst du so machen
[/FONT][/COLOR]

Code

[/FONT][/COLOR][COLOR=#881280][FONT=monospace]<script[/FONT][/COLOR][COLOR=#881280][FONT=monospace]>[/FONT][/COLOR][COLOR=#881280][FONT=monospace]

[/FONT][/COLOR]Wenn du dann nochmal testest sollten die Errors weg sein .Dann hast du noch warnungen die deine Nicht vorhandene Überschriften betrift

Sailor

Da sind immer noch die bereits benannten Fehler drin:
Die ID's 'tab1' und 'tab2' sind mehrfach vergeben! Eine ID darf nur einmal pro Dokument vergeben werden!
Des weiteren immer noch das falsch positionierte </p> (siehe Beitrag #8 )
Die Webkonsole meldet mir...

HTML

Laden fehlgeschlagen für das <script> mit der Quelle "http://connect.facebook.net/en_US/sdk.js".
...
Source-Map-Fehler: request failed with status 404
Ressourcen-Adresse: http://www.denkmodelle.de/easyComment/app/assets/lib/jquery-min.js
Source-Map-Adresse: jquery.min.map

Da stimmt was mit den Linkadressen nicht!
Beseitige erst mal die Fehler und dann prüfe, ob sich dein Problem damit schon gelöst hat!

Sailor

Wenn du alle Fehler beseitigt hast, dann schau mal in deine 'design.css' - da steht folgendes:

HTML

.tab-panels {
    height: calc(100% - 110px);
    width: calc(100% - 200px);
    overflow-y: scroll;
    background: #fff;
    position: fixed;
    z-index: -1;
    border: solid 1px #acd7fb;
}

Das 'z-index: -1;' ist dein Problem!
Setze den Wert auf eine positive Zahl (zB 10), dann sollte der Link auch im IE 11 funktionieren.
Mich wundert nur, dass die anderen Browser das so problemlos akzeptieren, denn eigentlich hat der IE Recht - oder?