Search code examples
cssinternet-explorerbrowser-cachemicrosoft-edge

IE and Edge not loading new stylesheet

My site got some new colors and I updated the color code in my CSS file, but as usual it won't load in IE or Edge for some reason.

I have cleared my cache in my site and browser. It's still not loading in the new color code.

Do you have an idea of how to fix this?

You are asking for details. så here is how my old css looked like. 

div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li:hover {
    background-color:#222;
}

div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li:hover a span{
    color:#fff;
}

div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li.level0.nav-2.level-top.parent.active, div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li.level1.active {
    background-color:#222;
}

New code

div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li:hover {
    background-color:#671125;
}

div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li:hover a span{
    color:#fff;
}

div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li.level0.nav-2.level-top.parent.active, div#root-wrapper > div.wrapper > div.page > div#top.header-container > div.header-container2 > div.header-container3 > div.nav-container > div.nav.container.clearer.show-bg.has-outline > div.navigation > ul#navi.nav > li.level1.active {
    background-color:#671125;
}

IE won't load this. It reads the old one, so some kind of cache issue, but I have tried clearing it all.

http://www.puk-int.dk/bestsellere/den-effektive-marketingplan.html

I can see in the response header that it takes old CSS. But why?

Solution

  • There are Developer tools inside of Internet Explorer and Edge that can help you diagnose CSS caching (which seems to be the issue you have encountered).

    If you press F12 you will bring up the F12 developer tools, you can go to the network tab. You can then see where the individual CSS files have come from and where they have been served from.

    There is an icon on the tool bar that has a server with refresh icon in the corner. You can enable this item "Always Refresh from Server" to ensure that all assets are loaded from the server rather than any cache.

    Sometime CSS files are cached by an intermediary Content Delivery Network.... In these instances you may want to look into implementing a cache busting strategy such as those described in this article : https://css-tricks.com/strategies-for-cache-busting-css/