When utilizing pseudo element ::before and display:table-cell in IE11, the glyphicons content may not appear as expected

I've been working on this for a while now, but I can't seem to find a solution. The issue I'm facing is that I want to display a glyphicon before the content of a text-block, and I need that element with the icon to fill up all the height that the body needs. This setup works perfectly in all browser versions except for IE. I have simplified the code and created a demo here.

<div class="block">
  <div class="body">BODY</div>
</div>

.body::before {
    background: blue;
    content: "\e005";
    font-family: "Glyphicons Halflings";
    display: table-cell;
    width:30%;
}

.body {
    background-color: green;
    display: table;
    width: 25%;
}

If you toggle the display property to 'table-cell' on the provided fiddle using IE11, you'll see where my issue lies. Can anyone provide me with a solution to this problem, or even better, explain what's causing it?

htmlcssinternet-explorer-11

Answer №1

There has been a bug report regarding this issue posted on the Microsoft Connect website. Specifically, in Internet Explorer, the font-family declaration is not recognized in pseudo-elements with the property display: table-cell;.

A workaround for this issue is to utilize display: inline-block; instead.

Answer №2

To achieve the desired result, add float:left to the .body element.

.body:before {
    background: blue;
    content: "\e005";
    font-family: "Glyphicons Halflings";
    display: table-cell;
    width:30%;
    float:left;
}

Check out this fiddle for a demo.

I am retaining the previous answer below in case it proves helpful:

You can experiment with using content: "\2665" instead of "\e005".

.body:before {
    background: blue;
    content: "\2665";
    display: table-cell;
    width:30%;
}

Visit this fiddle for further details.

For additional information, click here.

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

What is the best way to update text in an element when hovering or activating it?

I am currently designing a website with a prominently placed "Hire me" button in the center of the page. The button was implemented using the following code: <div id="hire_me_button"> <a href="contact.html"><h4 id="hire_me" class="butto ...

javascriptjqueryhtmlcss

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

What is the most effective method for digitally collecting a signature?

Currently, I am in the process of developing a website application using PHP that demands a signature from the user. This particular section of the website will only be accessible on Windows-based tablets. Hence, my inquiry is as follows: What method wo ...

phpflashhtmlcanvastablet

Supervising the organization of HTML sections for an offline web application

Currently, I am developing an offline HTML5 application that involves a significant amount of DOM manipulation through the creation of HTML strings within JavaScript functions. For example: var html=''; html+='<div class="main">&apos ...

javascriptjqueryhtml

What is the best way to toggle the visibility of a div using a button? And how can you incorporate a visual effect on the button when

I'm trying to implement a button that can hide and show a div, but for some reason, it only shows the div and doesn't hide it when clicked. Check out my fiddle: http://jsfiddle.net/4vaxE/24/ This is my code: <div class="buttons" style="bac ...

jqueryhtmlcssshow-hideeffect

The picture does not occupy the entire page

Here is a simplified version of my HTML and CSS: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } *{margin:0;padding:0;}/*added as requested*/ .background-image { background-im ...

htmlcss

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

What is the best way to make a black background div that perfectly aligns with another div?

When hovering over an image, I want it to fade out to opacity: 0.4, but instead of fading to white, I would like it to fade to black. To achieve this, I decided to change the background color of the body to black so that the fadeout will be towards black. ...

htmlcss

Tips for effectively handling repetitive bootstrap CSS code

As part of my coding routine, I often utilize the following code snippet to center specific content: <!-- horizontal --> <div class="d-flex align-items-center justify-content-center h-100"> .. </div> <!-- vertical --> & ...

cssbootstrap-5

Glitch Uncovered in Excel Spreadsheet I Exported

I have a situation where I am working with an HTML table that includes both text and radio buttons. The issue arises when I attempt to export the table data along with the selected radio button values to Excel using the 'Export to Excel' button. ...

javascriptjqueryhtmlcssexcel

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

htmlcssflexboxhidden

What is the best way to show toast notifications for various selections in a dropdown menu?

I have a dropdown menu labeled "FavoriteFoods" that includes options such as "Pizza," "Sushi," "Burgers," and "Biryani." When one of these food choices is selected from the dropdown, I would like a toast pop-up to appear with the message "Great choice!" ...

javascriptjqueryhtmltoast

Looking to sanitize an array of objects in Node.js? If you find that manually iterating through it only returns 'object Object', there are alternative methods to properly

I have a collection of items structured like this: var data = [ { msg: 'text' }, { src: 'pic.jpg',id: 21,title: 'ABC' } ]; My goal is to cleanse the values by manually iterating throug ...

javascripthtmlnode.jsxss

Designing websites or applications for mobile devices requires careful consideration of how content will

Currently, I am trying to use media queries to cater to mobile screens. The main problem I am encountering involves the text on the header when switching between Portrait and Landscape modes. In the landscape view, the top property overrides the portrait ...

cssmedia-querieslandscape-portrait

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

input[type="search"] doesn't seem to be functioning properly on IE9 and below. Any ideas on how to fix it would be greatly appreciated. Here is a screenshot for reference: .search-form .row input[type="search"] { color:#9fa0a0; font-size:20 ...

htmlcss

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

javascriptpythonhtmlcssdjango

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

javascripthtml

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/ I attempted to set overflow-y: auto; in the .inner-list class to handle ...

htmlcss

Choose certain table cells that do not have an identifier or any classes assigned to them

My table has 3 rows and 3 data cells. To select the first row, first data cell, and all bold tags from it: tr + td b {} To select the second row, second data cell, and all bold tags from it: tr+tr > td+td b {} I need help selecting them without usi ...

htmlcss

Adjust the colors of two elements by clicking a button's onclick event

As stated in the title, I have a button in the books component. When this button is clicked, the color of a div within the books component and another div in the navbar component should change. - Below is the code for the books component : export class Bo ...

htmlangulartypescriptbootstrap-4