3

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

user3287645
  • 31
  • 1
  • 1
  • 2
  • Are you building this locally or on a server? – Liftoff Feb 08 '14 at 16:48
  • 1
    Oftentimes what happens is your browser will cache the CSS file to make the page load faster and it takes it a minute to realize that the CSS file has changed. You can fix this by attaching a random GET variable to the end of the URL, e.g. `file.css?24798210` – Liftoff Feb 08 '14 at 16:50
  • I am running this locally. So Google Chrome updates the cache for CSS faster, which is why it takes effect right away compared to IE? Is there a why to change this in the browser, or is this a code change? – user3287645 Feb 08 '14 at 16:57

5 Answers5

3

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!

Community
  • 1
  • 1
dev7
  • 6,259
  • 6
  • 32
  • 65
  • 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. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control 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 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires – Ivan Rascon Jan 09 '20 at 19:25
1

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

RayLau135
  • 11
  • 5
0

Replace font-color with color. And try an inline <style>body {background-color:#FF0000;} </style> to see if maybe the stylesheet isn't loaded properly.

Dmitry Pavliv
  • 35,333
  • 13
  • 79
  • 80
Fven
  • 547
  • 3
  • 5
0

I do not know if anyone still trace this problem, but I was also confronted with them. I am developing a django application. My CSS file named "style.css" was loading correctly (at least the inspector of google chrome told me that), but had no effect on my page. It cost me a great deal of time to figure out, as RayLau135 mentioned above, that you have to rename the CSS file to a name without "style". For sure, this is not a solution, but indeed a work around to deal with this problem and to save a lot of time and nerves.

Texas
  • 559
  • 2
  • 6
  • 18
0

In my case, the same problem was caused by Alternate Data Stream of NTFS.

If your HTML file was downloaded from somewhere, and has a Zone.Identifier as Alternate Data Stream, it refuses to load CSS/JavaScript files generated locally with no/different Zone.Identifier.

https://blog.malwarebytes.com/101/2015/07/introduction-to-alternate-data-streams/

You can remove these data manually or by streams command.

https://learn.microsoft.com/ja-jp/sysinternals/downloads/streams

Masaki Ohashi
  • 421
  • 4
  • 4