For anyone that can help with CSS on IE-11. I cannot figure out why this code is not working. Only if I comment out the CSS .container_main_box {/*position: relative;*/... does the page load correctly and then the link on the left call the javascript function. I inherited this code and trimmed it down until I can recreate the issue which is what you see here. I have searched and tried everything I could find on the Internet and nothing works. I am really not good with CSS or any front-end stuff so I am really struggling with this. Can anyone help?
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Temporary</TITLE>
<SCRIPT type="text/javascript">
function openMenu() {
console.log("Called the Javascript function successfully.")
}
</SCRIPT>
<style>
.sidebar {
margin: 0;
padding: 0px 0px;
top: -15px;
width: 180px;
height: 417px;
float: left;
background-color: #2a2e43;
position: relative;
overflow: hidden;
text-align: left;
overflow-y: hidden;
border-bottom-color: #f7f6fa;
}
.sidebar a {
display: block;
text-decoration: none;
text-align: left;
font: Regular 11px/13px Helvetica;
letter-spacing: 0;
color: #ffffff;
padding: 8px;
font-size: 16px;
overflow-y: hidden;
border-bottom-color: #f2f2f7;
}
.box_size {
width: 100%;
}
.container {
padding: 0.2em 0.4em;
width: 100%;
height: 100%;
position: absolute;
margin-top: 20px;
}
.container_main_box {
position: relative;
float: left;
width: 100%;
height: 75%;
min-width: 50%;
max-width: 100%;
top: -432px;
}
</style>
</HEAD>
<BODY>
<DIV class="container">
<DIV class="sidebar">
<DIV>
<A onclick="openMenu()" href="#"><span>First Link</span></A>
</DIV>
<DIV>
<A onclick="openMenu()" href="#"><span>Second Link</span></A>
</DIV>
</DIV>
<DIV class="container_main_box">
<DIV>
<DIV class="box_size"><SPAN>Just some content...</SPAN></DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
.container_main_boxis on top of everything preventing all clicks on.sidebar. Not only on IE11 tho. Add different backgroundcolours to your divs and you see the issue.