Monthly Archives: August 2005

Like they do on the Discovery Channel

Not Again!?Another reader told me she checks the site daily but finds nothing new. This is for her.

Why wasn’t I warned these critters go at it like rabbits? They never tell you about these things when you first pick them up. Looking through the manual over and over again and provides little relief. Nope, nothing in there about the prolific Chihuahua libido.

Yoshi managed to force his way through her chastity harness and sow his oats – again. $1000 and many hours later I’m the proud grandfather of another set of puppies.

Its as if she knew it was to be her last litter and she wanted it to go off with a bang, well it did. Three puppies (one more than usual) proved to be far to much for her to pass naturally and thus required an emergency doggy c-section. Luckily, I live 3 minutes away from a 24 hour animal hospital. Admitted at 11pm and released at 3am she went through surgery like a little champ and has healed quite nicely. And now, PUPPY FEST 05!

Puppy Fest 05!
Click to view more images

IE’s Conditional Comment

Anti-IE bannerA reader recently asked how to reproduce the Anti-IE banner that is only visible to those viewing this site in Internet Explorer. The banner is made using an image, some css, and a nifty little piece of markup that lets developers target IE viewers without the use of javascript or any other scripting. Say hello to the conditional comment, brought to you by Microsoft.

Browser detection, sans scripting

There are a number of server-side or client-side ways to detect browser type, the IF IE conditional comment provides an alternate to scripting that is easy to use. Available since IE 5, and only Internet Explorer. Other browsers treat this comment, as they should, just like any other comment. IE however, will parse and render any code or markup found in the comment.

Usage

The conditional comment uses an IF statement that requires an argument. The available arguments are IE, IE 5.0, IE 5.5 … etc. Besides being able to specify which IE you are targeting, you can also use some conditional operators. Less than (lt) Greater than (gt) Less than equal (lte) Greater than equal (gte).


<!--[if IE]>
This message will render on Internet Explorer
< ! [endif]-->
<!--[if IE 6.0]>
This message will render only on Internet Explorer 6.0
< ! [endif]-->
<!--[if lte IE 5.5]>
This message will render on Internet Explorer 5.5 or below.
< ! [endif]-->
<!--[if lt IE 6.0]>
This message will render on Internet Explorer below version 6.
< ! [endif]-->

You could also use this in the head of a page to control styling. Using the comment to pass special css stylings to control how IE displays the page. In this example, a theoretical class named “box” would tell IE to render a slightly smaller width to compensate for its shoddy box model.


<!--[if IE]>
<style>
.box {width: 48px;}
</style>
< ! [endif]-->

Could this be labeled as a hack? Definately. But all the techniques that are used to get IE to display properly are hacks. At least this one lets us target IE without exploiting some bug in the browser code.

Using their feature against them

Screenshot of Anti-IE bannerEnough praise has been given Microsoft for this easy to use feature. Now its time to use this functionality to help spread browser awareness. As referred to earlier, the Anti-IE banner featured on this site uses the IF IE conditional comment to display a div only IE readers see.

This banner is shown to those reading Jefte.net on Internet Explorer. Other implementations of this include a brightly colored box just above the main content of your site with a message inside. Some have even placed this box at the very top of their page, so that IE viewers are confronted with this bright, large, unwieldy box proclaiming their browser incompetent. The banner shown in the image here was produced by this markup:


#ie-sucks {
position: absolute;
z-index: 1;
right: 0;
}

<!--[if IE]>
<div id="ie-sucks">
<img src="http://jefte.net/images/ico/ico-noie.gif" border="0" alt="WARNING: Your browser is insecure, out of date, and does not display this site properly!" usemap="#noie"/>
<map name="noie">
<area shape="poly" alt="" coords="83,0,226,143,226,225,2,0" href="http://browsehappy.com/">
</area></map>
</div>
< ! [endif]-->
</code>

Nothing more than a little css, a div and an image map, in a conditional comment. But what functionality! And what a great way to spread Firefox, Safari or whatever browser you prefer, to IE users.

UPDATE: Please refrain from this site's personalized Anti-IE banner. Please, redesign your Anti-IE banner and customize it for your website.

Resources & Links

MSDN Documentation on the Conditional Comment
Quirksmode.org page on the conditional comment.

http://dean.edwards.name/my/misbehaviors/
A css based popup for all IE readers, easy for you to download and link to in your page. Brought to you buy the guy that brought us the IE7 css hack.

http://txfx.net
Simple use of an anti-IE banner.