CSS3 functions properly on jFiddle, but is not compatible with Internet Explorer

This is a snippet of my code that includes a CSS animation. You can view the live version on JsFiddle here.

When I open the JsFiddle link in IE, everything works perfectly as intended.

However, when I try to run the same code locally, I encounter issues with how it renders:

I am using IE11 as my browser.

Here is the snippet of CSS code causing the problem:

#loading {
            /* CSS properties */
}

/* More CSS code */

        @keyframes expand {
            /* Keyframe animations */
        }

I have attempted to troubleshoot the issue specifically for Internet Explorer which explains why it runs smoothly on JsFiddle but not on localhost.

Any suggestions on what steps I should take next to resolve this would be greatly appreciated.

Edit html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="loading.css"/>
</head>
<body>

        <div id="loading"><strong>loading...</strong><span></span></div>


</body>
</html>

Answer №1

When utilizing XHTML 1.0 strict, the following HTML code can be combined with your CSS to achieve the desired visual effect.

<!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/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
<body>
    <div id="loading">
        <strong>loading...</strong>
        <span></span>
    </div>
</body>
</html>

We recommend comparing the above code with the current HTML you are using for any discrepancies.


Edit:

To address the issue you mentioned, I was able to replicate the error by enabling compatibility mode. To resolve this, kindly access Internet Explorer's settings by clicking on the gear icon in the top-right corner. Then, navigate to Compatibility View Settings and ensure that your domain is not listed under 'websites you've added to compatibility view.' Additionally, uncheck the option for displaying intranet sites in compatibility view. After making these adjustments, try reloading the page again.

Answer №2

Make sure to include the following snippet at the beginning of your code:

<!DOCTYPE html>

This is crucial for ensuring that your page displays correctly in Internet Explorer 11.

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

"The application is experiencing issues with loading styles correctly when using jQuery append (Fiddler has been

When attempting to load a div tag using the .append() method, the styles are not loading correctly. Here's the code that was tested: <section id="year-2020" class="tab-panel"> <div class="row accordion"> <header> ...

break-word property not functioning correctly within pre tag

Each row in my dataTable triggers a modal to appear: <div id="verifyModal" class="modal"> <div class="modal-content"> <h2>Verify # <span id="verify-modal-id"></span></h2> <pre><code class="" id="verif ...

What could be causing my elements to shift out of place?

Here is the box I created: BOX Now, I want to position another box near the input of the BET box. <div id="x2"></div> <!-- HTML ---> /* CSS */ #x2{ width: 40px; height: 40px; background: cornflowerblue; } The layout after ...

Is it possible to position two fixed divs side by side?

I am currently in the process of building my online portfolio. I am looking to create two fixed divs that will not scroll, each occupying the full height of the page. The content between these two divs should be scrollable while the bars on the left and ri ...

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

Trouble with toggling class "collapsed" in Bootstrap v3 Navbar-toggle when using multiple data-targets

When using the data-target attribute with multiple CSS selectors, the behavior of toggling the "collapsed" class in navbar-toggle does not work as expected. If only one selector is used, the class is toggled properly, but when multiple selectors are specif ...

Can you include an optional selector in SASS?

Here is an interesting concept: adding a CSS-selector optionally to the existing selector stack within a mixin. This is what I envision: @mixin myMixin(mobileSelector:true) { @if(mobileSelector) { .foo .mobile:before, } .classXY .subclass:before ...

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

What is the best approach to transfer information from the client side to a node

I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

Tips for replacing the default pointer image

Is there a way to change the default image for cursor: pointer to a custom image without having to create a new class for every element? Creating a class and specifying the hover value for cursor is not an ideal solution as it would require adding the cla ...

Displaying an image within a textarea using JS and CSS

Could someone help me create a form with textareas that have small images on them? I want clicking on the image to call a function fx(). Can anyone code this for me using JavaScript/jQuery/CSS? In the image below, clicking on "GO" will call Fx() I attemp ...

What is the best way to enable CSS IntelliSense for a Nuxt project?

Currently, I am undertaking a project using Nuxt.js and have set up a Docker image to manage all aspects of it. Additionally, I am looking to integrate MDBVue as a CSS library into my project. After some research, I learned that in order to utilize this li ...

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

Element with a fixed position within an iScroll container

Has anyone encountered an issue with fixing an element with position: fixed inside a big Iscroll page? It seems like the element scrolls along with the content due to the transition imposed by Iscroll. I'm trying to fix the "FIXTHIS" element, but it ...

Guide to utilizing JavaScript for a basic gaming experience

Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

Adjust the dimensions of input tag depending on the length of content in Angular

Is there a way to dynamically set the size of the input tag in my HTML based on the length of the ng-model value? I attempted this approach: <span>Node Path: <input for="nodeName" type="text" ng-model="nodePath" size="{{nodePath.length()}}"ng- ...

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

Creating an Image slideShow with only one Image - making it slide on itself

Apologies for this confusing and vague question. Imagine I only have a single image, and I want to create a slideshow using technologies like Angular, jQuery, JavaScript, or just CSS. What I am aiming for is when the user clicks on my slide button, the i ...