Internet Explorer is NOT a “good” browser. Internet Explorer is not a “decent” browser. Internet Explorer is quite possibly the worst way to surf the web available to today’s go-get-’em netizen. Using IE doesn’t automatically make you a BAD person, I mean sometimes, you’re forced to use it by BAD companies (they know who they are!). However, being aware of other browsers and STILL using IE might be the reason why you’re getting those stares in the checkout line and also why small animals are afraid of your “clicking” hand... they can sense the evil!

One area where iWeb and IE butt heads is with PNG’s. PNG stands for Portable Network Graphics and makes up almost every image on all of my pages. For design, PNG’s give you the photographic color of a .JPG with much better transparency than .GIF. It’s quite a cool thing and every modern browser can display them properly except one. Guess which ONE it is? Internet Explorer pre-version seven has SOME support for PNG, but the support is BAD. So bad, that there’s a little bit of script placed into the .js file for all iWeb pages that’s ONLY there to account for IE’s deficiencies. When it works, it works GREAT! When it doesn’t, you end up with the dreaded red-x. It’s as if some, oh, I don’t know, supervillain let’s say, has peppered your pages with a plethora of poorly positioned pellucid paraphernalia. What we’re here to do today is to find the culprit and put him behind bars (at least for 4 episodes).

Now, let’s be clear from the start that this ONLY affects the ne’er-do-well IE. If you’ve got red-x’s using any other browser, then you’ve got more serious problems and should see your family web professional immediately!

The problem has to do with the script I mentioned before and the things it’s trying to do. I don’t know much about the technical aspects of it, but, since the name of the function is “fixupIEPNG”, I’m assuming it “fixes up” Microsoft’s mess-up. According to the function, it only does it’s magic if it detects you’re running IE < 7. If you are, it does something squirrelly with a certain transparent.gif that makes all your PNG’s render properly. This is why when a page with PNG’s loads, all the images have a gray box around them until the last image is loaded. Then, this function takes over and makes ‘em all display alpha channels like they should have from the beginning.

Situation 1: Using .mac

If you’re using .mac, everything should be set up such that red-x’s won’t be a problem (unless you’ve been playing around in your iDisk’s Web directories). Even if you’re NOT using .mac, Publishing to a folder should work if you move the entire contents as-is.

Situation 2: I NEED MORE POWER!

You want to use something with a bit more OOMPH, do ya? Well, this is what you’ll have to watch out for. You’ve got Dreamweaver and you point it at a published directory for your site. You fly off helter-skelter re-editing html and putting in all sorts of whiz-bang gadgetry. You point Dreamweaver to your host of choice, check out your site later... red-x’s!!! From my prior experience with Dreamweaver, it draws connections and knows what needs to be uploaded by what’s in the page’s code. If it calls for a apple.png, then it’ll make sure an apple.png gets uploaded. The problem is that transparent.gif is not explicitly called for in the code. Because of this, while it may be sitting in the right directory, Dreamweaver thinks it’s an orphan and just leaves it there, never placing it where it needs to be on your server. The quick solution is to just tell Dreamweaver to get on the ball and upload ‘em or, just place them in the proper directories (everything that ends in _files) yourself.

Situation 3: We have NO spaces.

This one’s fairly insidious and almost drove me to tears because it didn’t make sense. Let’s take another peek at that function and how it’s called. Here we have an example site “WWDC revelations”. It’s I-gotta-fix-it-’cause-IE-is-crap codeline for a graphic’s fix, might be

fixupIEPNG(“id2”,” WWDC revelations_files/transparent.gif”);

Once again, hosting this on .mac, NARY a problem. However, here’s where publishing to a folder and uploading MIGHT be. iWeb allows spaces in file and directory names because Apple’s servers can support it. Other severs may not like that and decide to force you to replace spaces with underscores. So, the problem becomes:

WWDC revelations_files/transparent.gif

    where the code is looking for the file

WWDC_revelations_files/transparent.gif

    where the file actually is! (note the underscore)

As with example 2, since your browser can’t find the image... red-x! Here, your solution is to change your .js file to represent the correct location OR create your page names without any special characters, spaces or otherwise.

It was hard work, but we’ve defeated that nefarious nogoodnik. As long as you’ve got viewers using IE though, be aware that he’ll always be one shipment of xynothium ore away from spotting you with red-x’s faster than you can say Azarath, Metrion, Zynthos!