So…not everyone has control over what browser they use. But the first chance you get, please try to upgrade to a better browser. Internet Explorer does not support a lot of the newer standards, that websites are using now so things don’t render correctly. Microsoft stopped supporting it YEARS ago. People still use it. Microsoft held a funeral for it (in case people didn’t the message “hey guys, it ded”). People are STILL using it. And then complain when websites look messed up to them.

Dear webdevs

Here’s some HTML for a sitewide notice that only targets IE:

  1. <!--[if IE]>
  2. <div id="browser_notice" class="sitewide">
  3. <i class="fas fa-exclamation-circle"></i>
  4. <div class="text">
  5. Heads up! It looks like you're using a dead browser. Internet Explorer has been abandoned in August 2020 by Microsoft and is no longer receiving updates. This means as web technology evolves, things won't render or function correctly. <a href="" target="_blank" rel="noopener noreferrer">More Info &rarr;</a>
  6. </div>
  7. </div>
  8. <![endif]-->

Anything within the .sitewide element can be customized to your liking. In my CSS, I added position: relative; z-index: 10; to #browser_notice just to make sure, that no matter much IE fudges the layout up, the notice will always appear overlaying everything else. And then in my JS:

  1. setTimeout(() => {
  2. $('#browser_notice').fadeOut();
  3. }, 10000);

In case it is overlapping anything (in my case, it might overlap the search box on newer IE versions), it’ll just fade automatically, 10 seconds after the page loads. (The delay is in milliseconds, so if you would rather it fade away after 7 seconds, change the 10000 to 7000.)