CODEWITHSUNDEEP
htmlcssfirefox
Paweł Skaba
Paweł Skaba

Reputation: 681

Writing-mode issue on firefox

I've got following html/css code:

<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;
}

Everything works perfectly on chrome. On Firefox - writing mode make issues in display. Take a look: https://jsfiddle.net/a8yeb140/

What im doing wrong?

Upvotes: 1

Views: 1404

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

It seems indeed buggy for FF, one way to cure this, if you do not intend to style DL, is to use display:contents; which is actually understood by FF only but should remain harmfull in this test case when understood elsewhere.

.courses-edu-imm-nav-container {
  text-align: center;
}

.courses-edu-imm-nav {
  font-weight: 'Montserrat', sans-serif;
  font-weight: bold;
  margin: 0 auto;
  text-align: left;
  display: contents;
}

.courses-edu-imm-nav dt {
  writing-mode: vertical-rl;
  display: inline-block;
  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;
}

.active a {
  color: #ff4747!important;
  text-decoration: none;
}
<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>
https://jsfiddle.net/a8yeb140/3/

What is this about ? : https://developer.mozilla.org/en-US/docs/Web/CSS/display

<display-box>

These values define whether an element generates display boxes at all.

Value   Description

contents These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

none Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

Another option but understood everywhere via display might be to use the table-layout to force both element on the same line:

.courses-edu-imm-nav-container {
  text-align:center;
}

.courses-edu-imm-nav {
  font-weight: 'Montserrat', sans-serif;
  font-weight: bold;
  margin: 0 auto;
  padding:0;
  text-align: left;
  display: table;
  border:solid;
  background:turquoise
}


.courses-edu-imm-nav dt {
  writing-mode: vertical-rl;
  display: table-cell;;
  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;
}

.active a {
  color: #ff4747!important;
  text-decoration: none;
}
<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>

https://jsfiddle.net/a8yeb140/5/

Upvotes: 4

Related Questions