Koby Douek
Koby Douek

Reputation: 16693

.table-cell and .table display not working well on IE

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): enter image description here

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:

enter image description here

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

Answers (1)

pgrab86
pgrab86

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

Related Questions