0

I have a website that I am doing in my spare time. I am using it to display mountain bike events in South Africa. It is done in ASP.NET MVC 5 and the latest version of Bootstrap 3.

I am catering for Internet Explorer 8 as well as Google Analytics is showing some activity for this browser. I have Respond JS included as well as html5 shiv.

On the top menu you will see a Home menu option. Next to it I have an icon of the house. When the website loads up for the first time in Internet Explorer 8 you will see that it does not display, it just displays a white block. When I hover over it or click on home it displays. Why is this? It works fine in Firefox and Google Chrome.

The website is on a shared host at Arvixe. I have noticed that when I run the website through Internet Information Services (IIS) with an application pool then the icon loads up fine. When I remove the application pool then it doesn't load up properly.

Brendan Vogt
  • 25,678
  • 37
  • 146
  • 234

1 Answers1

2

It's a bug in IE related to the :before and :after pseudo elements.

See this question for more information, suffice to say, there's a JS workaround. You may need to adapt it to your own particular case.

var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
    head.removeChild(style);
}, 0);
Community
  • 1
  • 1
Paul Redmond
  • 3,276
  • 4
  • 32
  • 52