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« <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;
}Keine Ahnung???