Troubleshooting Firefox's Writing-mode Problem

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?

Answer №1

There appears to be a bug in Firefox, but one way to resolve this is by using display:contents; if you are not looking to style DL. This property is specifically recognized by Firefox only, but should not cause any issues elsewhere in this scenario.

.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/


To learn more about the CSS display property, visit: 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, universally applicable via display, could be to utilize table-layout to ensure both elements are displayed 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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troublesome Bootstrap Tooltip CSS not functioning properly with AJAX-loaded dynamic content

I'm experiencing an issue with bootstrap tooltips. The tooltips work in terms of functionality (showing on hover, positioning to the left, etc.), but they are not styled as expected. I have an AJAX request that fetches data and populates a table. Thi ...

Is it considered ineffective to define default CSS rules?

For instance, consider a scenario where there is a table. The conventional alignment practice (whether it's an HTML specification or specific to the browsers in use) appears to be left aligning the body elements and center aligning the head elements. ...

Tips for attaching inline styles to the body element with a vuejs component

I am new to vue.js and have been learning for a couple of days now. There are still some concepts that I am struggling to understand. I am currently working on creating a dropdown menu that appears when the user clicks on three dots. However, I am facing a ...

Customize Bootstrap styling based on screen size changes

I am curious to learn how I can adjust the CSS of my website in Bootstrap based on different screen sizes. I want to change text sizes and images, but I'm unsure about how to do it. Thank you for any guidance. Here is a snippet of my code: <!DOCT ...

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

Steps for removing the footer from WordPress with the "powered by WordPress" message:

I am curious about how to delete the footer that says "powered by wordpress". I created this page and at the bottom of it, there is a mention of "powered by wordpress". Website ...

The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...

Picture fails to load on iPad/iPod devices

My website is working perfectly, but I have encountered an issue when trying to view it on devices like iPod/iPad. The image of the elephants either doesn't show up at all or appears for a split second before disappearing. I've read other threads ...

Struggling with color styling within link_to tags in Rails 4 - having trouble getting inline styling to show up correctly

<%= link_to "Sign In", new_user_session_path, :method => :get, style: "color:white" %> <h3>Read More - <%= link_to 'Article', action: :articles, style: "color: purple" %></h3> <%= link_to 'Click to Read More Abo ...

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

Issue with ASP.NET Base64 image source rendering incorrectly

After retrieving a Base64 string from Azure active directory using a Lambda function, which represents a user's profile picture, I am facing issues displaying it on an ASP.NET page. Below is the code snippet in ASP.NET (The referenced HTML object is ...

The iconic image of Captain America rendered in high-quality SVG

Is there a way to create this star shape using SVG? I have tried using points but it's not working for me. I cannot use the path element. Any suggestions would be greatly appreciated. Thank you. <!DOCTYPE html> <html> <body> ...

Load the React chunk CSS dynamically to optimize performance and only when it is necessary

After running an audit, Lighthouse is advising me to "Defer unused CSS" for my React app. Despite implementing code splitting and having separate CSS files for each chunk, the suggestion persists. One particular example highlighted by Lighthouse is the foo ...

Internet Explorer doesn't seem to support CSS bottom property

I am using a div to represent a lesson that is dynamically filled up with a green span based on the student's completion percentage of the lesson. The height of the span is dynamically assigned for this purpose. While this functionality works seamless ...

Avoid using sticky positioning if the element exceeds the height of the screen

I have a sidebar that is set to be sticky, but in some cases it is taller than the height of the screen. If the sidebar ends up being larger than the screen height, I don't want it to stay at the top. Instead, it should scroll along with the content ...

Code snippet causing element block JavaScript malfunction

I'm attempting to create a basic automatic slideshow using JavaScript. let currentIndex = 0; startSlideshow(); function startSlideshow() { let slides = document.getElementsByClassName("slide"); for (let i = 0; i < slides.length; i++) { ...

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

Can you provide the URL for the mailto function on a webpage?

Is it possible to activate the "mailto" email address directly via URL on a webpage? For example, if you have an email address listed as [email protected], would clicking the URL in the browser open the mail client just like clicking the email address its ...

What is the best way to align inline-block elements in the center?

I'm looking for a way to center inline-block elements, but I haven't had much luck so far. When I tried using margin-top: x em;, it just moved the image down instead of centering it. The inline-block is intentionally nested inside an image block. ...

What could be causing my $.ajax() function to malfunction in Firefox?

Hey there! I've come across a unique issue with my code on my website. It seems to work perfectly fine on Safari, but when I try it on Firefox, it just doesn't seem to work. The code is pretty simple so I'm not sure where the problem lies. H ...