Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Absolute bottom positioning not working as expected in Edge and IE

I have an icon that is absolute positioned at bottom: 50px, while this works fine in every browser, Edge and IE are the exceptions. I understand there are a lot of problems with Microsoft's browsers and how they render differently. Here I see that the browser is treating the mid-way point of the 100vh div as the bottom. What I need help with is to position the icon in IE & Edge the same way it is in Chrome, Opera and Firefox. Thanks.

IE & Edge

enter image description here

Chrome, Firefox, Opera

enter image description here

HTML

.content1 {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  z-index: 99;
}


/* this is the icon I was talking about */

.dropdown_blue1 {
  width: 25px;
  padding: 20px;
  position: absolute;
  margin: auto;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 50px;
}
<div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div>
like image 810
Lord Goderick Avatar asked Mar 10 '23 11:03

Lord Goderick


2 Answers

Try with this one, i have changed margin: auto; to margin: 0 auto;

.content1 {
      height: 100vh;
      width: 100%;
      position: relative;
      top: 0;
      z-index: 99;
}
.dropdown_blue1 {
      width: 25px;
      padding: 20px;
      position: absolute;
      margin:0 auto; /* change here */
      z-index: 99;
      left: 0;
      right: 0;
      bottom: 50px;
}
<div class="content1">
   <img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt="">
</div>
like image 90
Jishnu V S Avatar answered Apr 07 '23 22:04

Jishnu V S


I had a similar problem with the two browsers, position absolute was crazy. In style section I had.

td.Cir  {width:7in; height:7in; background-image:url('clock.png'); 
  background-size: 45%; background-position: center; 
  background-repeat:no-repeat; position:relative; font-size:28pt;
  min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
  1px 0 blue, 0 -1px blue;}

In a table I had

</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>

I changed code to

<table><tr><td class='Cir'>...</td><td>...</td></tr></table>

and Edge and IE now work fine

like image 30
Howard Cary Morris Avatar answered Apr 07 '23 20:04

Howard Cary Morris