Here is the current appearance of the cross button in IE/Edge:
https://i.sstatic.net/JZ37V.png
And here is how it is supposed to look:
https://i.sstatic.net/Uqafg.png
Upon inspecting the CSS, it reveals that the #10006 html character has a color code of FFF:
https://i.sstatic.net/08cs2.png
I am seeking assistance on how to remove the black border and change the color to white. Any suggestions?
During my experiments, I noticed that IE applies a border to several unicode characters within the UTF-8 dingbats subset. This issue could be attributed to the limitations of the font used for rendering the character (potentially Arial Unicode MS?).
If you wish to reliably utilize the #10006 entity, it may be necessary to employ a web font that includes said character. For instance, utilizing DejaVu Sans can ensure proper display in Edge: https://jsfiddle.net/ekwtwv11/
@font-face {
font-family: 'DejaVuSans';
src: url(dejavusans-webfont.woff);
}
.utf10006 {
font-family: 'DejaVuSans', 'Arial Unicode MS', sans-serif;
}
Nevertheless, there exist alternative options that might be more suitable:
#215;, a character supported by most fonts:before and :after pseudo selectors to create an "x" on your button:<div class="btn"></div>
.btn {
position: relative;
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
left: 6px;
top: 16px;
display: block;
background: white;
width: 28px;
height: 8px;
}
.btn:before {
transform: rotate(45deg);
}
.btn:after {
transform: rotate(-45deg);
}
Feel free to explore this demonstration showcasing the aforementioned technique: https://jsfiddle.net/2p9ufxt7/
I attempted to implement the Matthew James Taylor method, utilizing three columns. However, my main issue arises when I desire the middle column to dictate the height. In other words, if the center div is 500px in height, I want the right div's height ...
I'm exploring how to achieve the backdrop effect of the Bootstrap modal without actually having to load a modal. However, I'm struggling to make it work correctly. Can anyone provide insight into the CSS that the Bootstrap backdrop utilizes inter ...
I am working on a form that includes 2 select tags with the options male and female. The first select, "gender", is visible to the user while the second select, "age", is hidden. <select name="gender"> <option value="1">Male</option> ...
I have a menu with 7 elements, where clicking on an element causes its content to appear by fading in. If another element is clicked, the current content fades out and the new content fades in. I've successfully implemented this concept for 3 of the 7 ...
Here is a code snippet that displays a list of products using *ngFor in Angular: <div class="container-products"> <div class="item-product" *ngFor="let product of ['product A', 'product B', 'prod ...
It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...
As a beginner, I am exploring web scraping examples from Automate the Boring Stuff. My goal is to create a Python script that automates downloading images from PHD Comics using the following steps: Identify the image link in the HTML and download it. ...
Is there a way to retrieve the index of a specific object from a JSON file? The following is an example of a JSON file content: [ { "time": "2017-04-11T22:31:50.3369265Z", "score": 0, "comment": "Meep meep! ", "handle ...
I have a menu that I would like to toggle hide/show by adjusting its top position. Before logging in, the menu is structured as follows: <div class="lc"> <h1><a href="./"><img src="logo.png" /></a></h1> <a h ...
Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...
Is there a way to create a "title bar" with text only, that stays fixed on top and the content below scrolls underneath it? Additionally, is it possible to make the title bar transparent for the background but not for the content below it? Also, can the s ...
I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...
Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. https://i.sstatic.net/iruev.png Wondering how to implement a multi-level dropdown in your Angular proje ...
Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...
Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...
My web and Jquery plugins are working flawlessly on various browsers such as Firefox, Chrome, Safari (Windows & OSX), and Android. However, they encounter issues with Windows and Internet Explorer as some JavaScript fails to load. It's frustrating tha ...
<div class="_jjzlb" style="padding-bottom: 55.2778%;"><img alt="AT Dam party.. #nashik #big #dam" class="_icyx7" id="pImage_11" src="https://instagram.fbom1-2.fna.fbcdn.net/t51.2885-15/e35/17438694_254543168340407_6435023364997251072_n.jpg" style ...
I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...
My header contains a large div with text contents and boxes, along with a background image. Now I want to create a slideshow for this div's background. Does anyone know how to make a slideshow for a div's background image? I've searched ex ...
To achieve the desired effect in the header, I need to create two expandable dropdown menus for the first two titles. My coding experience is limited, especially when it comes to javascript and jquery. Currently, I have managed to create the effect for one ...