CSS does not load in Internet explorer

html css internet-explorer web

17,938

Solution 1

Per your comments, seems as your problem is caching in IE.

You can try instructing the browser not to cache with some META keywords such as pragma and expires.

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1"/>

Take a look at this article - So you don't want to Cache, Huh?

And this question which suggests using this cross-browser solution:

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Hope this helps!

Solution 2

We had this issue with Internet Explorer 11, it's weird but if you rename the stylesheet to anything without the word "style" it will start working!

This is only the case when the accessing the file locally, on a web server it seems to work fine

17,938

Author by

Admin

Updated on June 08, 2022

Comments

Admin almost 2 years
So I am practicing HTML and CSS and doing some simple things like changing the color of the background in CSS. The problem is that when I load the page in Internet Explorer (IE 11) no changes show up. To test this further I loaded my page in Goggle Chrome and it displayed the page as expected.

This has happened a few times and I tried to make sure I deleted the cache in Internet Explorer, I made sure I was editing the right file and that the CSS style code was in the same directory. I made sure I did an Crtl + R / Crtl F5 refresh and it doesn't work. The weird thing though is that after loading it a few times in the past it works without me doing anything else.

Here is what I am trying to display:

HTML FILE:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lesson 12 - Fun With CSS Selectors</title>
  <link type="text/css" rel="stylesheet" href="styles.css" media="all">
</head>
<body>

<h1>Title of the page</h1>

<p>Lorem ipsum dolor sit amet ultricies. Nunc at aliquet nunc.</p>

</body>
</html>
```
CSS FILE:
```
h1{
    font-size: 30em;
    font-weight: heavy;
    font-color: red;
    line-height: 10px;
}

body{
    background-color: red;
}
```
The font color does not change in the h1 tag (probably because its not how you do it) but the background color changes in Google Chrome as well as the size of the font. In Explorer it remains a white page with the H1 tag content unchanged. Does anyone have any ideas on what could be happening?

UPDATE:

As of now when I load my page now in Internet Explorer 11 it now has the changes from the style CSS, but I changed nothing! I just opened it again... Can anyone explain what is going on, because this has happened multiple times
Ivan Rascon over 4 years

Specifying no-cache or max-age=0 indicates that clients can cache a resource and must revalidate each time before using it. So you could use only one of them. developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Cont‌rol Invalid dates, like the value 0, represent a date in the past and mean that the resource is already expired. So also you can use only <meta http-equiv="expires" content="0" /> developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires