Reputation: 16693
I seem to have an issue with displaying a .table and .table-cell display in IE browsers (works fine on Chrome).
This is how it looks on Chrome (how it should look):
Here is how it looks on IE browsers (9 and above). The cells are not positioned next to each other, they are positioned below each other:
Here is the HTML:
<div class="Tab">
<div class="row">
<input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" />
<input type="button" runat="server" class="Tabbutton iconScore " />
<input type="button" runat="server" class="Tabbutton iconInfo" />
<input type="button" runat="server" class="Tabbutton iconActions" />
</div>
</div>
Here are the CSS elements:
.Tab
{
width:100%;
height:40px;
display:table;
}
.Tabbutton
{
height:40px;
background-color:#EDEDED;
display:table-cell;
width:25%;
border-top:none;
border-right:none;
}
.TabbuttonActive {
border-bottom:none;
background-color:white;
}
.row{display:table-row;}
Upvotes: 0
Views: 19
Reputation: 101
display: table
and display: table-cell
are supported from IE11 http://caniuse.com/#search=table-cell
I don't know your case, what do you whant to do with these buttons, but is it possible for you, to use simple display: block
and float: left
?
.Tab
{
width:100%;
height:40px;
display:block;
}
.Tabbutton
{
height:40px;
background-color:#EDEDED;
display:block;
width:100%;
border-top:none;
border-right:none;
}
.TabbuttonActive {
border-bottom:none;
background-color:white;
}
.btnCol {
width: 25%;
float: left;
display: block;
}
.row::after {
content: "";
display: block;
clear: both;
}
<div class="Tab">
<div class="row">
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconScore " />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconInfo" />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconActions" />
</span>
</div>
</div>
Upvotes: 1