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.
.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>
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With