Can someone help troubleshoot this HTML/CSS code for me?
<div class="courses-edu-imm-nav-container">
<dl class="courses-edu-imm-nav">
<dt class="active"><a title="Mentoring" href="#">Mentoring</a></dt>
<dt><a title="Working holiday program" href="working-holiday-visa">Working holiday program</a></dt>
</dl>
</div>
CSS:
.courses-edu-imm-nav-container {
text-align:center;
}
.courses-edu-imm-nav {
font-weight:'Montserrat', sans-serif;
font-weight:bold;
margin:0 auto;
display:inline-block;
text-align:left;
}
.courses-edu-imm-nav dt {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
writing-mode: vertical-rl;
display:inline-block;
float:left;
padding:0 2em 0 1em;
border-left:1px solid #ccc;
height:10em;
color:#000;
font-weight:'Montserrat', sans-serif!important;
font-size:0.9em;
}
.courses-edu-imm-nav a {color:#000;text-decoration:none;}
.courses-edu-imm-nav .active a {
color:#ff4747!important;
text-decoration:none;
}
Chrome is displaying everything perfectly, but Firefox is having issues with the writing mode. See it here: https://jsfiddle.net/a8yeb140/
Any ideas on how to fix this?