Top:50% wont work in IE

Question

IE wont display my css properly. I think it i the Top:50% that does not work becouse if i change it to Top:0% it is the same.

.box-center{
border: 0.2em solid #83BAE9;
padding-left: 0.5em;
height: 100%;
width: 100%;
display: inline-block;
}

.box-center-text{
float:left;
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%) ;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}

img{
width:5em;
height:5em;
padding-left:0.5em;
float:right;
}

<table>

@foreach (var item in Model)                

    {
     <tr>
     <td>

     <div class="box-center">
     <div class="box-center-text">
      @Html.DisplayFor(modelItem => item.Namn) @Html.DisplayFor(modelItem => item.Efternamn)

      </div>
     <img src="@Url.Content(img.jpg)">
     </div>
     </td>
     </tr>
      }
     <h1>Test</h1> 


</table>

Here is how it looks in IE and Chrome: https://i.stack.imgur.com/HeDhl.jpg
I have IE verison 11.

Welcome to SO!. Please post your HTML within your question. Thanks! — GibboK, Feb 29 '16 at 07:12
Please post the output HTML (you can use https://jsfiddle.net/ or SO or similar), it will be easier to receive answers :). If your problem also relate to server side technology, please add appropriate tag to your question. — GibboK, Feb 29 '16 at 07:40

Alex Tall · Answer 1 · 2016-02-29T10:43:35.657

In IE and Firefox the parent cant have a hight in %, if top (or bottom) shuld work.

I fixed it by adding a 5em hight on td ( when i set the hight to 5em on Box-center it dident work but it worked with 4.999em)

.box-center{
border: 0.2em solid #83BAE9;
padding-left: 0.5em;
height: 100%;
width: 100%;
display: inline-block;
}

.box-center-text{
float:left;
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%) ;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}

img{
width:5em;
height:5em;
padding-left:0.5em;
float:right;
}

td{
height:5em;
}

<table>

@foreach (var item in Model)                

{
 <tr>
 <td>

 <div class="box-center">
 <div class="box-center-text">
  @Html.DisplayFor(modelItem => item.Namn) @Html.DisplayFor(modelItem => item.Efternamn)

  </div>
 <img src="@Url.Content(img.jpg)">
 </div>
 </td>
 </tr>
  }
 <h1>Test</h1>

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

top will work with position absolute

.box-center-text{
    float:left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform:translateY(-50%) ;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    }

Helpful Link

edited May 23 '17 at 11:59

Community

1
1

answered Feb 29 '16 at 10:50

Faisal Ramzan

169
8

Top:50% wont work in IE

2 Answers2