CODEWITHSUNDEEP
htmlcsscross-browsermicrosoft-edge
iuliu.net
iuliu.net

Reputation: 7145

'bottom' doesn't work in Edge

I have the following HTML:

.arrow {
  width: 50px;
  position: fixed;
}
.arrow.arrow-right {
  top: 0;
  bottom: 0;
  margin: auto;
  right: 15px;
}
.arrow.arrow-bottom {
  left: 0;
  right: 0;
  margin: auto;
  bottom: 15px;
  transform: rotate(90deg);
}
<img src="http://bestanimations.com/Signs&Shapes/Arrows/Left/left-arrow-15.gif" class="arrow arrow-bottom" />
<img src="http://bestanimations.com/Signs&Shapes/Arrows/Left/left-arrow-15.gif" class="arrow arrow-right" />

And I expect the first arrow to apear near the right edge of the screen, and the second one near the bottom of the screen.

This is exactly what happens in Chrome, Firefox and Opera:

enter image description here

In Edge, it seems that the 'bottom' rule is just.. ignored:

enter image description here

Why is this happening?

Fiddle

Upvotes: 0

Views: 617

Answers (1)

gurudeb
gurudeb

Reputation: 1876

Just change to the following:

.arrow.arrow-bottom {
    left: 0;
    right: 0;
    margin: 0 auto; /* instead of auto */
    bottom: 15px;
    transform: rotate(90deg);
}

The margin: auto was causing the issue. Please let me know if it solved the issue or not.

Upvotes: 3

Related Questions