user2728841
Reputation: 1427
Internet Explorer 11 zindex html/css bug
I have two outer div containers at the same level in the dom with the same z-index, but the first container overlaps the second. This only happens in IE11, its ok in Edge, Chrome and Firefox.
Can anyone suggest a workaround ?
Even when I set zindex in the second box to a higher amount, I still get the elements in the first box overlapping the second box, just the "tab" elements that is.
There's a fiddle here https://jsfiddle.net/paull3876/3cobnxz7/2/
You'll need IE to repro the problem
/*---------------------------------------------------*/
/* Dialog Box CSS */
/*---------------------------------------------------*/
.dialogveil
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color: rgb(100, 100, 100); /* for old browsers */
background-color: rgba(100, 100, 100, 0.7);
display:none;
}
.dialogcentre { /* exists only to center the div */
position:relative;
vertical-align:middle;
text-align:center;
top: 50%;
left: 50%;
max-width:100%; /* stops negative coords on small window */
max-height:100%;
min-width:300px;
transform: translate(-50%, -50%);
display:inline-block;
}
.dialogbox
{
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
border: 1px solid #111111;
box-shadow: 2px 2px 40px #222222;
vertical-align: top; /* correcting the alignments set from parent div above */
text-align:left;
}
.dialogheader
{
background-color: rgb(239, 239, 239);
background-color: rgba(239, 239, 239, 1);
border-bottom: 1px solid #111111;
height:24px;
cursor:default;
}
.popover .dialogheader {
border-bottom: 1px solid #aaaaaa;
}
.dialogheadertitle
{
color:#bb2200;
height:24px;
text-align:left;
vertical-align:middle;
padding: 4px 0px 0px 14px;
font-size:9pt;
font-weight:bold;
display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.dialogheaderrightside {
float:right;
height:21px;
display:inline-block;
}
.dialogheadericons {
background-image:url("/images/hamburger.gif");
background-repeat:no-repeat;
width:47px;
height:21px;
cursor:pointer;
display:inline-block;
padding-right:5px;
padding-top: 2px;
}
.dialogheaderclose
{
background-image:url("/images/closev7.jpg");
background-repeat:no-repeat;
width:47px;
height:21px;
cursor:pointer;
background-color:Red;
display:inline-block;
}
.dialogbody
{
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
padding:10px 10px 10px 10px; /* all except popup */
}
/*---------------------------------------------------*/
/* End Dialog Box CSS */
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/* Tabs */
/*---------------------------------------------------*/
.tabs {
position: relative;
min-height: 200px; /* override this in the form's css */
clear: both;
margin: 25px 0;
}
.tabs .tab {
float: left;
}
.tabs .tab label {
background: #eee;
padding: 5px 15px 5px 15px;
border: 1px solid #ccc;
position: relative;
left: 1px;
cursor: pointer;
}
.tabs .tab [type=radio] {
display: none;
}
.tabs .content {
position: absolute;
top: 18px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow:auto;
}
.tabs [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
/*---------------------------------------------------*/
/* END Tabs */
/*---------------------------------------------------*/ <div class="dialogveil" style="display: block;">
<div class="dialog dialogcentre dragparent" style="left: 559px; top: 196.5px; position: absolute; min-width: 800px; transform: none;">
<div class="dialogbox" id="dlg389ca753-2181-4698-b0ea-a50e133f0d92" style="width: 800px; height: 600px;">
<div class="dialogheader draggabledialog">
</div>
<div class="dialogbody">
<div class="form formsystemeditquery" id="systemeditquery-d3367c9349b74213b82dc30d4cee5f23" data-avname="System Edit Query" data-avid="869" data-form="system edit query" data-src="System Edit Query">
<div class="databox inlineblock" id="c-querysubform" data-fld="querysubform">
</div>
<div class="tabs">
<div class="tab">
<input name="tab-group-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" id="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" type="radio" checked="checked">
<label for="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23">Query Designer</label>
<div class="content">
<div id="c-QueryDesigner">
<div class="databox" id="c-QueryColumns" data-fld="querydesignersubform">
<div class="xa xafield xaform" id="querydesignersubform">
<div class="xainner xavtext bind xainnersubform " id="querydesignersubform-inner" style="width: 780px; -ms-overflow-x: hidden;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input name="tab-group-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" id="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" type="radio">
<label for="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23">Tab Two</label>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dialogveil" style="display: block;">
<div class="dialog dialogcentre dragparent">
<div class="dialogbox" id="dlg75971d36-e97c-4394-ae76-91ca900a83ea">
<div class="dialogheader draggabledialog">
<div class="dialogheadertitle">Message</div>
<div class="dialogheaderrightside">
<div class="dialogheadericons"></div>
<div title="Close this Window" class="dialogheaderclose"></div>
</div>
</div>
<div class="dialogbody">
<div class="divalert">
<div class="inlineblock divdialogicon"></div>
<div class="inlineblock divalertbody">dirty:true</div>
</div>
<button class="dialogbutton xaenterkeybutton" id="ok" type="button">OK</button>
</div>
</div>
</div>
</div>edit: you might need to go full page and then resize the window to see that the "Query Designer" tab overlaps the message div.
edit2: I forgot to save the fiddle so just changed the link to /2
Upvotes: 0
Views: 4191
Answers (1)
Pascal Goldbach
Reputation: 1007
You forgot to add a z-index in the class .dialogveil
/*---------------------------------------------------*/
/* Dialog Box CSS */
/*---------------------------------------------------*/
.dialogveil
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color: rgb(100, 100, 100); /* for old browsers */
background-color: rgba(100, 100, 100, 0.7);
display:none;
z-index : 1;
}
.dialogcentre { /* exists only to center the div */
position:relative;
vertical-align:middle;
text-align:center;
top: 50%;
left: 50%;
max-width:100%; /* stops negative coords on small window */
max-height:100%;
min-width:300px;
transform: translate(-50%, -50%);
display:inline-block;
}
.dialogbox
{
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
border: 1px solid #111111;
box-shadow: 2px 2px 40px #222222;
vertical-align: top; /* correcting the alignments set from parent div above */
text-align:left;
}
.dialogheader
{
background-color: rgb(239, 239, 239);
background-color: rgba(239, 239, 239, 1);
border-bottom: 1px solid #111111;
height:24px;
cursor:default;
}
.popover .dialogheader {
border-bottom: 1px solid #aaaaaa;
}
.dialogheadertitle
{
color:#bb2200;
height:24px;
text-align:left;
vertical-align:middle;
padding: 4px 0px 0px 14px;
font-size:9pt;
font-weight:bold;
display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.dialogheaderrightside {
float:right;
height:21px;
display:inline-block;
}
.dialogheadericons {
background-image:url("/images/hamburger.gif");
background-repeat:no-repeat;
width:47px;
height:21px;
cursor:pointer;
display:inline-block;
padding-right:5px;
padding-top: 2px;
}
.dialogheaderclose
{
background-image:url("/images/closev7.jpg");
background-repeat:no-repeat;
width:47px;
height:21px;
cursor:pointer;
background-color:Red;
display:inline-block;
}
.dialogbody
{
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
padding:10px 10px 10px 10px; /* all except popup */
}
/*---------------------------------------------------*/
/* End Dialog Box CSS */
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/* Tabs */
/*---------------------------------------------------*/
.tabs {
position: relative;
min-height: 200px; /* override this in the form's css */
clear: both;
margin: 25px 0;
}
.tabs .tab {
float: left;
}
.tabs .tab label {
background: #eee;
padding: 5px 15px 5px 15px;
border: 1px solid #ccc;
position: relative;
left: 1px;
cursor: pointer;
}
.tabs .tab [type=radio] {
display: none;
}
.tabs .content {
position: absolute;
top: 18px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow:auto;
}
.tabs [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
/*---------------------------------------------------*/
/* END Tabs */
/*---------------------------------------------------*/ <div class="dialogveil" style="display: block;">
<div class="dialog dialogcentre dragparent" style="left: 559px; top: 196.5px; position: absolute; min-width: 800px; transform: none;">
<div class="dialogbox" id="dlg389ca753-2181-4698-b0ea-a50e133f0d92" style="width: 800px; height: 600px;">
<div class="dialogheader draggabledialog">
</div>
<div class="dialogbody">
<div class="form formsystemeditquery" id="systemeditquery-d3367c9349b74213b82dc30d4cee5f23" data-avname="System Edit Query" data-avid="869" data-form="system edit query" data-src="System Edit Query">
<div class="databox inlineblock" id="c-querysubform" data-fld="querysubform">
</div>
<div class="tabs">
<div class="tab">
<input name="tab-group-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" id="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" type="radio" checked="checked">
<label for="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23">Query Designer</label>
<div class="content">
<div id="c-QueryDesigner">
<div class="databox" id="c-QueryColumns" data-fld="querydesignersubform">
<div class="xa xafield xaform" id="querydesignersubform">
<div class="xainner xavtext bind xainnersubform " id="querydesignersubform-inner" style="width: 780px; -ms-overflow-x: hidden;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input name="tab-group-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" id="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" type="radio">
<label for="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23">Tab Two</label>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dialogveil" style="display: block;">
<div class="dialog dialogcentre dragparent">
<div class="dialogbox" id="dlg75971d36-e97c-4394-ae76-91ca900a83ea">
<div class="dialogheader draggabledialog">
<div class="dialogheadertitle">Message</div>
<div class="dialogheaderrightside">
<div class="dialogheadericons"></div>
<div title="Close this Window" class="dialogheaderclose"></div>
</div>
</div>
<div class="dialogbody">
<div class="divalert">
<div class="inlineblock divdialogicon"></div>
<div class="inlineblock divalertbody">dirty:true</div>
</div>
<button class="dialogbutton xaenterkeybutton" id="ok" type="button">OK</button>
</div>
</div>
</div>
</div>Upvotes: 1