I’ve been wanting to put up a banner ad to promote Firefox on my site for a while now. The reason I haven’t is that 38% of the visitors coming to my site already have Firefox. I would hate to force them to see a banner ad everytime they visit my site. The people who need to see the banner ad are those who are using Internet Explorer. So I figured there must be a good solution to this!
My first thought was to use JavaScript to do some browser sniffing then output the banner ad if the user was using IE. Although that would work, 9% of all users on the Internet have JavaScript turned off. And with Microsoft recommending that users disable JavaScript in IE due to recent security flaws, this number is only going to get higher. So I decided that I needed a better solution.
Ironically enough, the solution I decided to go with, uses the CSS Child Selector flaw in Internet Explorer to display the banner. So here is the technique…
1. Add a the following code to your page:
<div id="ffx">
<a href="http://www.spreadfirefox.com/">
<img src="/img/sfxBanner.gif" />
</a>
</div>
2. Next, in your stylesheet add the following rule:
html>body #ffx {
display : none;
}
3. That’s it!
The way it works is that IE does not understand child selectors (>) so when IE comes across the html>body #ffx rule, it ignores it. Firefox, being a far superior browser, understands the rule and applies the CSS rule and hides the div that contains the banner image!
To see this in action, open this page in IE to see the banner ad, then open the same page in Firefox to not see the ad!
{ 15 comments… read them below or add one }
Unless I’m being dumb (which wouldn’t be the first time) this doesn’t work, as I’m using Firefox and I see the ad :)
There are two ads in the sidebar. The ad I am referring to is a large banner across the top of the page.
you should do a big flashing pop-up ad – Firefox users will never see it. ‘WARNING!! you must upgrade your browser!!’ – maybe with a monkey that you have to spank for cash prizes :)
It’s the large banner across the top I’m referring too :)
heh, I think you can only whip that dog so much before it will bite you back.
In that, yeah exploit the IE to gain FireFox (great idea actually) but the moment some propella head discovers a flaw in FireFox code or exploit, that little campaign will come back ten-fold and bite everyone on the hand.
I love FireFox, and i’m confident in its security, but its like teasing an confined animal, your protected but once it gets free…its your ass.
Nice technique! Turn IE’s flaws on itself. Beautiful!
BTW, your current (IE-only) banner ad has mis-spelt “currently”.
cheers
David
It would be good to include a line advising that the banner doesn’t display under Firefox, in the banner itself, so that IE users have some idea why it’d be good to switch.
unfortunately this method won’t work if CSS is not loaded for some reason (deliberately disabled or overrided, connection error or under small screen rendering). in my opinion, browser sniffing (for string ‘MSIE’) works better.
You could just use IE against itself another way, without any CSS hacks:
<!--[if IE]>You evil person!<![endif]-->Good eh?
Nice implementation Jim
awesome idea. i made my own banner and did the same thing.
only real change I made otherwise, is to send the person straight to the download page on mozilla.org.
since the majority target audience (for my sites) is friends and family, I know they’re not technical enough to get to the download page otherwise. so I’m routing them straight there, should the choose to enrich their lives some…
:)
thanks for the tip!
Great idea Jim. I use Opera, and I don’t see the ad ;-). But I guess your target group is IE users, so it’s fine.
#ffx {display: none; !importantdisplay: inherit;}Both methods are just as easy and simple, and most importantly: work.
Just downloaded and tried firefox. Went to some sites that I know are spyware sites. Norton flaged viruses, spyware tried to install in background(Microsft Ant-Spyware) stoped that.
Going Back to IE until Firefox FIXES their security problems.
Yes Going back to Internet Explorer 6 SP2.
Well i dont see this banner. Matter of fact i see no ads. Yeah i turned off ad blocker but still see nothing. :)
Oh well…
Tried on my site too and does not work!!!! Maybe micrisoft fixed it in the last three months. ;)
I can’t see the banner from any of IE, Firefox or Mozilla?
Maybe IE is fixed by July 06??