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.

Comments

12 Responses to “How-To: Internet Explorer Warning Infobar”

  1. David Naylor on February 23rd, 2006 3:50 am

    Cool. I might give that a try.

  2. Vernalex on February 25th, 2006 11:04 pm

    I didn’t notice it because I was using Firefox, but that is a really nice trick. It would be nice if in IE7 Microsoft finally fixed their CSS implementation.

    However, I really wish Firefox supported the HSPACE and VSPACE img tags. It causes a big problem when you’re trying to write a website using HTML 3 for non-CSS enabled browsers and you can’t pad your images…

  3. iansquall on March 19th, 2006 10:11 am

    That’s really handy, I like that feature.

  4. JM13 on April 12th, 2006 4:35 pm

    This is great! Thanks.

  5. Impish on April 30th, 2006 2:44 pm

    Nice look. Now if only google’s adsense firefox program wasn’t so restrictive – it’d be nice to earn a few bucks for the recommendation ;)

  6. Atria on May 2nd, 2006 12:23 pm

    Very nice work! Perhaps a message like “Missing browser, click here to install firefox plugin” could be used :)

  7. Gary R. Hess on May 8th, 2006 9:03 pm

    Just trying this out on IE to see if it works. It looks fine, except there is a horizontal scroll bar. :\

  8. Gary R. Hess on May 8th, 2006 9:04 pm

    Woops, meant to say, not just on your blog, but when I tested it on my website also. Something is wrong with the CSS, or perhaps the javascript? Not too sure exactly. I’ve been messing with the code for a while, hopefully I figure it out soon.

  9. Hisham on May 8th, 2006 9:08 pm

    @Gary: If you find a fix, please post it here. I have been so busy that I haven’t had a chance to debug the code. The problem with the scroll base has to do with the CSS absolute versus relative tag (if I remember correctly). Let me know what you find. Thanks.

  10. Gary R. Hess on May 8th, 2006 10:17 pm

    I got it. Just change the position:absolute; to position:relative; for #infobar

    It works great, and even doesn’t cover up any content for the visitors.

  11. Hisham on May 8th, 2006 10:55 pm

    @Gary: With the change, does the infobar still move with the page or is it stuck at the top?

  12. Gary R. Hess on May 9th, 2006 8:43 am

    It moves with the page. This is a REALLY bad bug in IE. I have no clue why it works like this, but it does. :\