Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine:

https://i.stack.imgur.com/x9lio.png

However, in IE it appears differently:

Your code:

HTML:

<div id="centerArt">
        Hi, Visitor!
    </div>

CSS:

#centerArt{
font-family:"Arial", Arial, sans-serif;
font-weight: bold;
font-size: 100px;
line-height: 150px;
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.3);
 -webkit-background-clip: text;
 -moz-background-clip: text;
      background-clip: text;}

Any suggestions on how to make IE behave properly? :)

Thank you!

htmlcssinternet-explorertext

Answer №1

background-clip: text is not compatible with Internet Explorer. The only valid property values are border-box, padding-box, and content-box: https://msdn.microsoft.com/en-us/library/jj127314(v=vs.85).aspx

You may want to consider using 

@supports (-webkit-background-clip: text)
along with a backup for other web browsers.

Answer №2

Unfortunately, Internet Explorer does not recognize the color: transparent value. You can try using

font-size: 0; or add an IE hack like background:none\9;

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

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. Here is an example ...

javascriptcssreactjsmaterial-uinext.js

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second. Despite trying various s ...

javascripthtml

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

When I try to print, the icons like ...

javascriptcssprinting

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

My upload.php file saves images into an uploads/ folder within my main directory. I am looking to dynamically add a new li tag to my index file each time an image successfully uploads. Here is a snippet from index.php: <ul> <li><im ...

javascriptphphtmlimagehtml-lists

Storing user data on the client side of a website is most effectively accomplished by

I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...

javascripthtmlsecurityweb

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

htmlcssinternet-explorerflip

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...

cssangulartypescriptstring-interpolation

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

issue with displaying content in bootstrap tabs

Every time I attempt to load a tab, it redirects me to the homepage. Just for reference, I am using AngularJS as my JavaScript framework. <div class="container"> <h1> Tab Panel </h1> </div> <div id="exTab1" class="container"&g ...

jqueryhtmlangularjstwitter-bootstraptabs

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

I recently started using Material-UI and encountered an issue where I couldn't override the root class for Avatar, specifically MuiAvatar-root. Material-Ui Version: 4.11.3 Despite following examples provided by material-ui's documentation here, ...

cssreactjssassmaterial-ui

MVC Template with a Defective BootStrap

Struggling with creating an MVC master template along with sub-pages using Bootstrap. Sadly, I seem to have messed it up and can't quite figure out where the problem lies. You can check out my test website at Do you see how the different sections a ...

cssasp.net-mvc-4twitter-bootstrap

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

I'm currently using Netbeans version 8.0.1 with PHP version 5.3 Here is a PHP file example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/199 ...

javascriptphphtmlarraysnetbeans

Developing an Easy-to-Use PDF Popup Interface

I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up. I want to replace the imag ...

javascripthtmlcsssimplemodal

extract information from the HTML id attribute and assign it to a PHP variable using the GET method

After reviewing numerous examples, I am still unable to retrieve the value from the ID attribute in my input element. This identifier is crucial for deleting records from the database, but my attempts with Get method have been unsuccessful. <?php ...

phphtmlattributes

SASS: a common thread connecting multiple applications

The scenario involves a web platform that aggregates various React apps, each with its own .scss files. The goal is to extract the common .scss into a library for convenience. Any suggestions on how best to accomplish this? It's important to note that ...

cssreactjsnpmsass

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

CSS technique to display background on hover

My website has a bootstrap 'More' dropdown feature on the left navigation bar. However, there is an unwanted background hover effect that I can't seem to remove. Despite removing all background hovers from my CSS, the issue persists. Can any ...

css

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

javascripthtmlcsslayoutresponsive-design

Attempting to utilize Flexbox to populate vacant areas

https://i.stack.imgur.com/BhPU0.png Can the yellow square smoothly transition to the empty grey square and beyond in this layout setup? Each flex item represents a component that can utilize either 50% or 100% of the container width, information only know ...

htmlcssflexbox