IE11 Experiencing Overflow Issue with List Item Pseudo Element Numbers

Having a simple unordered list of links and using pseudo elements to generate numbers for the list, I encountered an issue with centering the number vertically within its circle background in Internet Explorer 11.

Here is the HTML code:

<ul>
  <li class="list-item">
    <a>Link 1</a>
  </li>
  <li class="list-item">
    <a>Link 2</a>
  </li>  
  <li class="list-item">
    <a>Link 3</a>
  </li>
</ul>

And here is the SCSS code:

.list-item {
  counter-increment: step-counter;
  margin-bottom: 1.5rem;
  color: $c-white;
  font-size: 1.4rem;
  line-height: 3.5rem;

  a {
    position: relative;
    padding-left: 3.8rem;

    &:before {
      color: $c-white;
      content: counter(step-counter);
      font-size: 1.3rem;
      height: 2.4rem;
      width: 2.4rem;
      border-radius: 50%;
      margin-right: 20px;
      position: absolute;
      left: 0;
      text-align: center;
      line-height: 2.6rem;
      top: -.5rem;
      background-color:teal;
    }
  }
}

The issue with the numbers in IE11 can be seen in this link:

IE11 Numbers Issue

In comparison, the numbers display correctly in all other browsers as shown in this link:

Other Browsers Numbers Display

cssinternet-explorerinternet-explorer-11

Answer №1

I created a fiddle using your code as reference: https://jsfiddle.net/7mwgzeba/

There is a well-documented bug () where setting a rem value in the line-height property always results in it being calculated as "1px". Microsoft claims to have fixed this bug in IE11 and Edge, but it still seems to persist. Using em instead of rem appears to work in IE11.

Since the issue only affects pseudo-elements, a workaround could involve adding an empty span to each list item:

<li class="list-item">
    <a><span></span>Link 1</a>
</li>

...and moving the styling from the SCSS to the span itself:

/* ... */
a {
    position: relative;
    padding-left: 3.8rem;

    span {
        color: $c-white;
        font-size: 1.3rem;
        height: 2.4rem;
        width: 2.4rem;
        border-radius: 50%;
        margin-right: 20px;
        position: absolute;
        left: 0;
        text-align: center;
        line-height: 2.6rem;
        top: -.5rem;
        background-color: teal;

        &:before {
            content: counter(step-counter);
        }
    }
}

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

Organize your table with CSS styling

Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below: [1][2] [1][2][5][6] [3][4] => [3][4][7][8] [5][6] [7][8] Wondering if this can be achieved using o ...

csshtml

The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different. Here's how it appears in Chrome Safari In Safari, you'll notice that the map disappears. I've tried several methods, including setting a minimum ...

htmlcsssafariflexbox

jQuery does not trigger background image change in Webkit

const displayPreviewImage = (imageUrl) => { $('#slideshow-container').css("background-image", `url('files/images/store/content/templates/websites/preview_images/${imageUrl}'`); } I have a function here th ...

jquerycssajaximagebackground

Struggling to align nested grids in the center

I'm currently following a mobile-first approach in designing my website. The entire website is contained within one main grid, and I also want to include smaller grids that will serve as links to other HTML pages. I created a sample nested grid but am ...

javascripthtmlcss

Incorporating additional value attributes without replacing the existing ones

Is there a way to add a value attribute through jQuery without removing the old attribute, similar to how addClass works? I have 7 input fields that are being typed in, and I need to combine them into one word and pass it to another input field. When I try ...

javascriptjqueryhtmlcss

Stretch a component outside of the bootstrap container

Currently, I am working on a mockup using Bootstrap 4 and have encountered an unusual element inside the container where the background extends beyond the container. I'm not sure how to address this issue effectively. I attempted to use position: abso ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Remove checked rows in a table with a single click

I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation. Here is the code for the Delete button: <tr id="deleteproject" > <td wi ...

javascripthtmlcsshtml-table

Ways to customize the appearance of an iframe's content from a separate domain

I am facing a challenge with my widget and multiple websites. The widget is hosted on one domain, but the websites use an iframe to display it. Unfortunately, because of the Same Origin Policy, I cannot style the content of the iframe from the parent websi ...

javascripthtmlcssiframe

Issue with font-family not being applied in PHP code

Struggling to preview different fonts? The code below should work, however, the font doesn't seem to change. Check out the output: my Text - Arial.ttf - 1 my Text - Batman.ttf - 1 my Text - Verdana.ttf - 1 While the font is being detected, it& ...

phpcssfonts

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

javascriptjquerycssif-statementscroll

Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

I am currently trying to set a custom image as the cursor using jQuery in this manner $(document).ready(function(){ $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto'); }); While this method works, ...

jqueryhtmlcss

Display the initial page and activate the first navigation button when the page loads

Greetings to everyone. I am new to the world of jquery and currently in the process of learning. This is my script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"> </script> <script> $(function () { $ ...

javascriptjqueryhtmlajaxcss

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

htmlcssbootstrap-4

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

htmlcss

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

htmlcsspseudo-element

"Creating a HTML Table with Merged Cells using colspan and rowspan

Creating an HTML table with a unique layout is my latest project. I envision it to look like this: +-------+---+ | | | +-------+ + | | | +-----+-----+ | | | +-----+-----+ To achieve this, I'm utilizing a colgroup to split t ...

htmlcsshtml-table

Preventing absolute div from spilling out of its parent container

Within a parent container, I have a lengthy div. I believe that it needs to be positioned absolutely in order to allow horizontal scrolling. My goal is to only display the portion inside the parent div. I attempted setting overflow: hidden on the parent ...

csshtmllayout

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

javascripthtmlcsstwitter-bootstrap

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page: import styled from 'st ...

htmlcssreactjsstyled-components