How-To: Internet Explorer Warning Infobar

I have received a few emails asking how to implement the Internet Explorer “infobar” warning on their own site. If you don’t know what I’m taking about, when browsing to my blog with Microsoft’s infamously buggy but popular browser, users see this:

Internet Explorer Infobar

Background: I don’t have to preach to the choir about Internet Explorer (IE) having a lot of quirks when it comes to rendering CSS heavy pages in addition to all the security issues plaguing the browser. The theme on this site is a slightly modified version of K2 which still needs some work to make sure it displays properly on IE. Not only do I not have time to fix these bugs myself due to school but more than 80% of my readers use Firefox. I still wanted to display a warning to any IE users letting them know that this site won’t look quite right without using an alternate browser (i.e. Opera, Safari, Konq, Firefox, etc.). Although I’m not afraid to tinker, I don’t enjoy reinventing the wheel so my first hope was finding someone else having coded this before I went at “programming” a little css/javascript myself. Google brought me to a Zatacka.com posting that had the basic CSS and example code ready to go. Interestingly, the Zatacka.com version was a streamlined version of the original author’s code (dead link). However, this minimized version did not scroll with the page in IE because IE does not properly support position: fixed. There were many possible solutions to getting this to work but most involved messing up all position: absolute blocks on the page. Finally, I found a solution that I adapted to work the way I wanted.

Instructions: This is how to add it to your site. (Warning: Your mileage may vary so backup your site before attempting an of this. Don’t come running to me when something goes wrong.)

1. Save warning.gif by right clicking and hitting “Save as…”

warning.gif

Warning.gif Image File

2. Create a file called infobar.css and paste the following code into it. Note that the path to warning.gif must be updated to reflect your site. Then save it.

[code lang=”CSS”]
/*
Name: No IE Information Bar
Version: 0.2.6 Minimized
Original: http://minghong.dyndns.org:8080/Software/infobar/
Modified by: http://zatacka.com/index.php/2004/12/ie-warning/ and http://blog.hishamrana.com/
*/

body {
margin: 0;
}
#infobar {
font: message-box;
position: absolute; left: 0px; top: 0px;
z-index: 5; /* Change this value accordingly to reflect your site’s setup */
}
body>div#infobar {
position: fixed; /* Hopefully Internet Explorer 7 will parse this tag proporly */
}
#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active {
display: block;
float: left;
clear: both;
width: 100%;
color: InfoText;
background: InfoBackground url(‘http://path/to/warning.gif’) no-repeat fixed .3em .3em; /* Change this path */
border-bottom: .16em outset;
text-align: left;
text-decoration: none;
cursor: default;
padding: .45em 0 .45em 2em;
margin: 0 -2em 0 0;
}
#infobar a:hover {
color: HighlightText;
background-color: Highlight;
}[/code]

3. Modify your site’s template. For K2, I put this all into my header.php file.

Part A: Somewhere right after the tag paste the following (change the path to infobar.css for your site):

[code lang=”Javascript”]


[/code]

Part B: Right after tag paste the following:

[code lang=”HTML”]

[/code]

That’s it. Let me know if there are any mistakes or a better way of doing this.