Showing a “browser upgrade” message to IE users
I decided to show a message about why Internet Explorer is shite, and a link to get Firefox on the main page, but obviously only wanted to show it to IE users.
Initially, I had a div named #firefox, and defined it in the css as display:none, then overrode that definition with the * html hack that only IE understands. Therefore, non-IE browsers wouldn’t display it, and IE would accept the over-ride, and display the browser upgrade message:
#firefox{display: none;} /*don't show the Firefox ad in good browsers */
* html #firefox {display:block;} /*show Firefox ad to IE */
Thinking about it, though, I realised that I was switching content on and off rather than styles, so should be using the xhtml rather than the css for that, cause xhtml is about content and CSS is for style.
So, I changed the CSS so that #firefox was displayed to all browsers, and surrounded the html code with an IE-only conditional
comment:
<!--[if IE ]>
<div id=”firefox”>
blah blah blah
</div>
<[endif]—>
The html content is only parsed by IE (and thus takes the default style in the CSS). Non-IE browsers never use that CSS, as they never see the #firefox markup.
Now, the content is controlled by the markup, rather than the CSS. Anally retentive, moi?
WRONG:
RIGHT:
August 25th, 2005 at 12:22 pm
Sorry?!
you’ve lost me, funbug!
August 25th, 2005 at 7:42 pm
Well, I guess it’s hard to guess what I mean as long as WordPress is eating the HTML.
What I wanted to say is that the last space in “[if IE ]” won’t work on some versions of IE. It should be “[if IE]” instead.
Furthermore, in the end it has to be “[endif]-–>” instead of “[endif]->”.
You did that right in your source code but wrong in your entry.
I really like your message that will show up for IE users. Especially tha part with the 900%. I translated that sentence in German and use it on my site if that’s okay for you. Anyhow, I think it’s for a good cause.
Regards
August 25th, 2005 at 11:11 pm
Thanks Funbug… WordPress swallowed my entities!
Translate and use as you will.
For fun, would you mind pasting your translation here? I don’t speak any German, so would like to see how it looks.
August 25th, 2005 at 11:35 pm
Sure. This would be the translation of your message:
[German]
Warnung! [or Achtung!]
Du nutzt den Internet Explorer um diese Seite zu betrachten, Du armer fehlgeleiteter Mensch. Er ist langsam, die Hälfte an ihm funktioniert nicht, und er lässt eine Menge Viren durch, die Deinem System schaden oder Deine Daten klauen.
Warum versuchst Du es nicht einfach mit Firefox? Er ist kostenfrei, schnell, sicher und er wird Deine Anziehungskraft gegenüber Deinem bevorzugten Geschlechts um bis zu 900% steigern.
Komm schon. Tu Deinem Computer einen Gefallen.
[/German]
Maybe you are able to show that message for your german visitors. Impossible is nothing.
I’m only using the second paragraph on my site.
August 26th, 2005 at 9:25 am
The link you provided:
http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html
doesn’t apply to all IE browsers - IE7 displays all content the same as any other browser.. and Firefox is no more secure than IE7 now.. people target it just as much..
June 24th, 2006 at 5:51 pm
That’s true, Jargon, thanks for pointing it out. In my defence, 17 months ago when I wrote this article, IE7 wasn’t thought of yet.
June 24th, 2006 at 8:38 pm
Frankly, I’m still not sure that IE7 has been thought of yet. While it’s definitely an improvement up to about 2003 or possibly 2004 standards, it’s still full of gunky bits and snaggly innards.
July 25th, 2006 at 11:57 am