user2728841 user2728841 - 1 month ago 9
CSS Question

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

Answer

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>