Button not clickable in IE, but works in modern browsers - html

Question

In the example here, button.vertical-button__btn with the text "Description" is hoverable and clickable in all browsers but IE. (I've put a CSS border on hover to illustrate this. You can also see when the button is clickable by the 'hand' pointer appearing.)
A caveat: When I say it is not clickable in IE, I mean that the full button text (highlighted in yellow) is not clickable. Oddly, the extreme right edge of the button element does click and hover as intended.
What is causing this behavior, and how can I make the functionality the same in IE as with modern browsers?
I am only interested in supporting IE 11 and Edge... IE 10 and under do not need to be supported.
Edit:
Another odd behavior: If I remove the element div.project__image The button becomes clickable, but I cannot figure out why, and I need the div element to remain.
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>

Answer 1

I do believe that it's a matter of z-index.
If you add a z-index: 200 to your vertical-button, the button will be clickable, even in IE.
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
z-index: 200
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>