What is a web browser?

Not sure what a web browser is? Check out WhatBrowser.org, watch the video, then come back here.

Ready? Good.

Let me tell you a story…

Let’s say you’re visit a new place, and you have this really cool cab driver driving you around so that you can go site-seeing. This cab driver has agreed to be like a tour guide, taking you wherever you want to go so that you can explore all of the interesting (web)sites. This driver — let’s call him Mr. Firefox — takes you all sorts of places that you want to go. He always knows the best routes to take, and always makes sure you get there safely. As your cab driver, you trust that he will get you there safely.

Following me so far?

But there’s something you don’t know about Mr. Firefox: He’s retarded. Like, completely and utterly retarded. Like, little yellow school bus retarded. If you told him to drive into the lake, he would. He’s that stupid.

On the up-shot, Mr. Firefox knows that he’s retarded, so to deal with this he surrounds himself with a bunch of really good people that he knows he can trust. These people — let’s call them the Authorities — look out for him, and teach him which places are safe and which are not. This way, if you were to ask Mr. Firefox to drive into a lake, he would know that this is a bad idea and won’t do it (or will at least tell you how bad of an idea it is).

A dirty cop

Now, what if it was discovered that one of these Authorities was a dirty cop? This dirty cop has been taking bribes from Iranian terrorists to tell Mr. Firefox that it’s perfectly safe to drive you into a lake. Or that the bridge that was under construction is finally ready to drive across, when really it would collapse. Even though you don’t have a gun being waved in your face, you’re still in danger even though you can’t see it.

You trust your cab driver, who trusts the Authorities — one of which is a lying douchebag.

It really happened!

Well, this is what has happened to the Internet over the past few weeks. You trust your web browser, your web browser trusts the Certificate Authorities, and two of these Certificate Authorities were hacked by Iranian terrorists. These terrorists generated security certificates so that they could impersonate and eavesdrop on sites you know and love: Facebook, Twitter, Yahoo!, Google, Gmail, Yahoo Mail, Hotmail, Mozilla, and even the C.I.A. Over 250 511 sites in all are affected by this (and still counting).

To stay safe, browser makers (Mozilla, Microsoft, Google and Apple) have started issuing updates that revoke their trust for these hacked Certificate Authorities. As such, you need to make sure you’re running the very latest version of your web browser.

How do I stay safe?

The best way to stay safe is to update your browser to the very latest version. If you’re not sure what browser you’re running, check out WhatBrowser.org. It will tell you.

• If you have a computer running Microsoft Windows and/or are running the Internet Explorer web browser, make sure you run Microsoft Update (formerly Windows Update) and install all of the available updates — specifically Security Advisory 2607712.
• If you have a computer running Mac OS X and/or are running the Safari web browser, make sure you run Software Update and install all of the available updates — specifically Security Update 2011-005.
• If you’re running the Mozilla Firefox web browser, make sure you update to the latest version (6.0.2 at the time of this writing).
• If you’re running the Google Chrome web browser, you get automatic updates, so you probably don’t have a lot to worry about.

Where can I learn more?

Here are some links about what has happened. I’ll group them into two categories: less technical and more technical.

Less technical

• http://www.bbc.co.uk/news/technology-12847072
• http://news.cnet.com/8301-31921_3-20046340-281.html
• https://www.readwriteweb.com/hack/2011/08/ssl-certificates-whats-left-to.php
• http://www.wired.com/threatlevel/2011/03/comodo_hack/
• http://feeds.arstechnica.com/~r/arstechnica/index/~3/3Vj5zxvMwGw/comodo-hacker-i-hacked-diginotar-too-other-cas-breached.ars
• https://secure.wikimedia.org/wikipedia/en/wiki/DigiNotar#Issuance_of_fraudulent_certificates
• https://secure.wikimedia.org/wikipedia/en/wiki/Comodo_Group#Breach_of_security

More technical

• https://blog.mozilla.com/security/2011/08/29/fraudulent-google-com-certificate/
• https://blog.mozilla.com/security/2011/09/02/diginotar-removal-follow-up/
• http://googleonlinesecurity.blogspot.com/2011/08/update-on-attempted-man-in-middle.html
• https://blogs.technet.com/b/msrc/archive/2011/08/29/microsoft-releases-security-advisory-2607712.aspx
• https://blog.torproject.org/blog/detecting-certificate-authority-compromises-and-web-browser-collusion
• http://www.f-secure.com/weblog/archives/00002128.html
• http://pastebin.com/u/ComodoHacker

Update: Bankruptcy (2011-09-25)

DigiNotar has filed for bankruptcy:

This is unsurprising, since a report issued by security audit firm Fox-IT, who has been hired to investigate the now notorious DigiNotar breach, revealed that things were far worse than we were led to believe. [...]

All CA servers were members of one Windows domain and all accessible with one user/password combination. Moreover, the used password was simple and susceptible to brute-force attacks.

Snow Stacks

(Can’t see the video? Watch it directly.)

Image Fly

(Can’t see the video? Watch it directly.)

Because of that, we need to go the long way. We’ll download the “officially sanctioned” VirtualPC images containing a time-limited version of Windows XP SP3 and Internet Explorer 6.0, and then we’ll convert these images to the kind that work with VMware Fusion (which works on Mac OS X). This should only need to be done every 3 or 4 months when the images expire.

These instructions are loosely based on the ones found at Running IE6, IE7 and IE8 on your Mac.

Update: Microsoft’s images are broken, and don’t work on anything except VirtualPC now. Mac and Linux users are out of luck for the time being. More information on the subject can be found at http://petelepage.com/blog/2009/09/running-the-ie-vpcs-on-other-vpc-hosts/.

Prerequisites

• You need to have VMware Fusion installed on your Mac.
• You need to have access to a Windows XP machine, as this is where the converting will happen.

Installing Qemu (FIRST-TIME ONLY)

1. Download a small application to our Windows machine called Qemu. At the time of this writing, you want to download the regular version 0.9.1. Once it’s done, unzip it someplace that’s easy to get to via the command line (e.g. c:\qemu).
2. Go into the Qemu folder, then into the bin folder and copy all of the files in the bin folder back to the original Qemu folder (you can simply copy-paste).

Downloading and Preparing stuff

1. On Microsoft’s website, they have a page entitled Internet Explorer Application Compatibility VPC Image where you can download various time-limited images that allow you to test combinations of Windows XP SP3 or Vista, along with Internet Explorer 6.0, 7.0, and the 8.0 betas. In this example, we’re going to install the IE6/XP image but you can do whatever you need to do.
2. We’ll need to unpack this download in Windows, so if you haven’t already, make sure you’re doing this part in Windows.
3. Double-click it (in Windows) to begin unpacking it. It will warn you that it has an expiration date. On that date, we’ll have to download a fresh VPC image from Microsoft and do this all over again.

Converting the image

1. You’ll want to copy the XP SP3 with IE6.vhd file into the Qemu folder. This will allow us to use simpler, more consistent commands to convert the image.
2. In your Windows VM go to Start Menu > Run, type the cmd command, and click OK.
3. Using your deftly intimate knowledge of MS-DOS, use commands like cd to navigate to where you unpacked Qemu.
4. If you don’t know MS-DOS commands from a hole in the wall, you can download Open Command Window Here from Microsoft, install it, find the Qemu folder in the normal Windows Explorer, right-click, and choose “Open Command Window Here”. One method is shorter and harder, while the other is easier and slower. Take your pick.
5. Type the following command in your MS-DOS window:

   qemu-img.exe convert -f vpc "XP SP3 with IE6.vhd" -O vmdk IE6-XP.vmdk

   Note that “XP SP3 with IE6.vhd” is the path to the IE6 VPC file you downloaded, while “IE6-XP.vmdk” is the new file that VMWare Fusion will use.

6. Wait. This will probably take 5-10 minutes.

Configuring the VM

1. Move the new .vmdk file to your Mac.
2. Open VMWare Fusion (or shutdown the Windows VM you may already have running) and click File > New.
3. Go through the wizard and when you get to the “Virtual Hard Disk” page, expand “Advanced disk options”, check “Use an existing virtual disk” and use the dropdown to find the new .vmdk image you just copied back to your Mac.
4. Finish the wizard and start it! If prompted to upgrade the virtual hard drive, click “Yes.”

Installing the drivers and VMWare Tools

1. With VMWare Fusion running, download and decompress vmware_xpsp3_drivers.tar.gz. Copy all of the resulting files to c:\windows\system32\drivers. Make sure you install these BEFORE the VMware tools!
2. Download vmware_mouse.reg and double-click it to load its settings into the Windows registry. VMware doesn’t correctly overwrite these setting upon install of the VMware tools, and the mouse can start doing wonky things. These registry settings fix it.
3. In VMware, click Virtual Machine > Install VMWare Tools.
4. Follow the instructions. If Windows asks for additional drivers, point it to c:\windows\system32\drivers.
5. Make sure that you shutdown the VM and configure your memory (etc.) settings appropriately.

Everybody needs this! Even those of us who have spent lots and lots of time around the web, this is a good thing. It’s especially good for people like my in-laws and many of my other friends and family.

Besides that, here’s some good information my wife passed along to me:

Having worked for a bank for over 5 years, I will tell you that a little bit of education goes a long way. Never ever EVER give out your pin # to ANYONE!!! Banks will never ask for this information (Other than asking you to enter you own pin # into a machine). Bank employees don’t even have access to your pin #. Your bank would never send you an email asking you to verify your personal information — the bank already has it if they need it.

I recently received an email (I think that it was a bank from Tenessee); When I clicked on the link, it took me to a sign on page. It was really quite clever, you could enter any user ID, and any password. Then, they asked you to verify your bank information. (Including your pin) The other type of phishing email that I have been receiving a lot lately, has been on behalf of phony people from other countries. These people will ask you to reply to their email with your contact info. Then, they will try to get you to cash a fake cashier’s check from them of some ridiculously large amount. They will tell you that your cut is 30% or 40% in some cases. Don’t be fooled by these either.

If you receive an email asking you for any sort of financial information/help know that it is probably a scam, you should delete it at once, or you can forward it to the Federal Trade Commission at spam@uce.gov, or contact them at www.consumer.gov/idtheft or 877.IDTHEFT (877.438.4338).

According to Bugzilla, the patch has already been added to the trunk (although it’s not quite complete yet), and seeing as how its status has been set to blocking 1.8.1 (which according to this roadmap is Firefox 2 timeframe), I’m hoping that this will finally get implemented.

Yay!

Lots of information can be found about IE7, specifically improved CSS compliance (hasn’t yet been updated with the current build information, but will). This build is supposed to be rendering engine complete, meaning that this build will render webpages the same way that the final release will.

I’m tempted to do a full install of IE7, and simply run IE6 standalone from now on…

If I’m interested in some new software whereby using it I’d have to change my habits (such as changing browsers, or text editors, or mail clients), I’ll install the new software and promise to use it for a week. If after that week I decide that I like it better than what I’m currently using, I’ll make the switch. I figure a week is a good chunk of time to try something out because any irritations and possible solutions for those irritations will have surfaced by the end of the week. I have faith in this system for myself, because this is how I found Mozilla 0.99, Firebird (later Firefox), Adium, Transmit, FlashFXP, Topstyle, and other constantly-used bits of software.

I’ve had my eye on Camino for a while, but I wanted to wait until it hit 1.0 (which happened last week) before I tried it out. Having a browser with the rendering engine of Firefox, but had an Aquafied UI was very tempting to me. Instead of switching between Safari (my default browser on my Mac) and Firefox (which I use for viewing the source of RSS feeds), I could switch between Camino and Safari; Two browsers that feel Mac-like. Unfortunately, I ended up finding more things about Camino that I don’t like, so Camino has now been uninstalled. Here’s why:

1. No support for extensions. You mean, no Firebug? No Gmail Notifier? No Greasemonkey? No Reveal? I might as well be using Internet Explorer then.
2. No DOM Inspector. If it’s there, I couldn’t find it. For someone who does as much development as I do, I need to have my DOM inpector and my JavaScript console… especially if I can’t run Firebug.
3. No live bookmarks. This is one of my most used features of Firefox, and to a certain extent Safari. I need to be able to have 1-click access to certain feeds from within my browser. Or at least the ability to detect them.

There are some things, however, that I really did like about it.

1. It’s crazy fast. A Gecko-based browser that’s as fast as Safari? Camino’s right there.
2. Favicons in the bookmarks bar. Mmmm… favicons….
3. Something else. I’m sure there was something else, but I just can’t think of it right now.

If you don’t care about any of these things, then I suppose Camino is as good a browser as any other. But it seems like Camino is roughly on par with Firebird 0.6. It can render pages just fine, and it’s got some speed to it, but it simply does not yet have the feature set to make it a viable alternative for web developers. Maybe Camino 2.0 will have the features it needs to compete, but Camino 1.0 simply isn’t there yet.

I’ve been doing a lot of Ajax development lately for an internal webapp where I need to dynamically add nodes to lists. In my source code, I’ll have an empty <ul> tag with an ID, then I use that ID when I go and add <li>‘s to it. No big deal, right?

If you use the standard view-source contextual menu item, it will show you the source code that you coded in: the empty <ul> tag. BUT, if after you’ve added your <li> nodes dynamically, you click-and-drag to select the rendered area, and choose “View Selection Source”, Firefox will show you the fully-rendered HTML for that area. As in, it will show you the <ul> tag with all of your <li> tags inside of it… just as though you’d coded it like that in the first place. How awesome is that?

So if you need to see what HTML your JavaScript is generating, simply select the area, and choose “View Selection Source”.

This is the download package that was made available as the Internet Explorer 7.0 Beta 2 Public Preview. This version of IE7 writes a couple of keys to your registry.

Don’t try to run the iexplore.exe like you have in the past (even with the standalones). Instead, run the __RUN_ME.bat file. This will make sure that the above-mentioned registry entries are removed, and will automatically add the .local file, etc.

I had a problem for a while where IE7 would “flicker-quit”. As in, a window would display for a fraction of a second, and then quit. This is the only package that worked for me, but even then it didn’t work at first. Here’s what I was doing when it magically began working.

• I ran the normal iexplore.exe file
• I ran the __RUN_ME.bat file (didn’t work, btw)
• Went into the update folder, and double-clicked the IE icon. It started the installer.
• Went back to the root folder and tried __RUN_ME.bat again.
• Out of frustration, ran __RUN_ME.bat yet again just so that I could get angrier at the IE team.
• IE7b2 magically worked.

I’m still not sure which part of my voodoo worked, but I have it running. I may have had some problems because I was previously running the IE7b1 standalone.

This is completely unsupported — completely. The official word from Microsoft is that we shouldn’t be running them in standalone mode anyways.

Stop yelling at me like that! You’re preaching to the choir, brother (or sister)! I know that Microsoft really needs to release official standalone packages for developers to work and test with that are available from MSDN, and not intended for public consumption. But I don’t make the rules—I just break the bad ones.

When Microsoft said “your potential, our passion”, they weren’t talking about web designers. But maybe they should have been… How’s this for an idea: Microsoft has been pretty responsive to our requests for a better browser with IE7. How about we bombard them with comments and such letting them know that we want our standalone mode in order to fix the mess they made in the first place.

Here’s the URL for the IE Blog. Let them know how you feel. Pester the crap out of Chris Wilson, Al Billings, and the rest of the ‘softies that simply barking “unsupported” is unacceptable, and that they need to help us fix the problem by either producing official IE standalones, or by not making it so freaking hard to make happen.

«Update» The zipped package now uses version 1.4 of the IE Launch Script. Now supports conditional comments.

You can download the new release from Mozilla.com, or if the servers are overloaded, you can get them from Skyzyx: Downloads.

• Firefox 1.5 for Windows
• Firefox 1.5 for Mac OS X

This has actually been up for about a year, but was never made public. This is where the Standalone Internet Explorers, latest Firefox releases, and other bits of software will live too. Actually, part of my goal for this is to be an unofficial mirror for the Firefox 1.5 release.

There’s lots more to come in the coming weeks. Some of it will be old stuff with a fresh face, others will be new things all together. And I’ll finally have a place to showcase all of the Ajax demos I’ve worked on over the past few months.

At the moment, I have the latest copies of the Macromedia Studio 8 Trials, Nero 6.6 Ultra trials, OpenOffice 2.0, and more. Have fun!

The Problem:

I was checking out a cool site tonight, and saw this:

How irritating!

The Solution:

Open up your QuickTime control panel, go to the Browser tab, click Mime Types, and deselect Flash from the Miscellaneous tree option:

After you’ve clicked all necessary OK buttons, restart Firefox.

All Better:

I went back to the cool site, and all was well with the world:

I hope this helps someone out there Googling for “QuickTime playing Flash files” or something like that.

Most implementations typically involve clicking a button or link to go to the Edit page. From there, you typically have to go through some moderately unusable process for reordering links, changing descriptions or current links, or adding new links. This may or may not include several pages and several page refreshes to get it all done the way you want it to be. Quite frankly, that sucks.

So, I spent several hours over the weekend digging through the documentation for Prototype and Scriptaculous in order to build a much more usable, natural, intuitive system for making these kinds of customizations. It’s not quite the same as the lists used in Basecamp, Backpack, or Ta-Da lists, but these services were definitely an inspiration. Here’s a video of what I’ve got so far. The video is a little tall for standard 1024×768 monitors, so you may have to size it down a smidge to see it all. QuickTime 6 or 7 should be plenty new enough to watch the video.

I’m not quite ready to release the code yet, as it’s not completely done, but once I add the few more things to it that I plan to, you can download the code and do whatever you want with it. The backend is done in PHP with text files, and shouldn’t require anything special except for a relatively modern browser (released in 2001 or later).

Now, there’s no easy way to import your Thunderbird email into Apple Mail. After about 30 minutes of Google searching, I came across the simplest way to convert my mailbox from one client to another. After the initial import, it took some tweaking to get everything organized the way I wanted it, but overall it was a relatively simple process considering that there is absolutely no Thunderbird import feature. Hopefully, when my copy of Tiger comes in, the upgrade will be smooth and I’ll be able to immediately take advantage of the new Mail 2.0 features.

In terms of my web browser, I’ve been using Omniweb 5.1 for the last few months. I liked the side-tab layout as well as the per-site settings that Omniweb offered, but after hearing about all of the speed improvements in Safari 1.3, I had to give it another whirl.

Oh. My. Goodness.

Safari 1.3 flies! That, and for some reason, things just look a little nicer and a little smoother in Safari. Don’t even get me started on Firefox for OSX. Firefox for OSX is about as ugly as Netscape 4.x for Windows 95. Well, maybe I’m exaggerating a bit, but it’s still pretty ugly on OSX.

Back to the point, I went ahead and re-imported my bookmarks back into Safari, and reset it as my default browser in OSX. The new features in Safari 2.0 will be awesome, I think, and hopefully Firefox 1.1 will get its long-awaited “Aquification”.

Anyways, my copy of Tiger is on track to be shipped on April 29th. Is yours?

With a small, one-time change, Conditional Comments will work again and recognize the values 5.0 and 6.0, again; however, it will not recognize 5.5.

How is it done? Go to the registry and look in HKLM\Software\Microsoft\Internet Explorer\Version Vector\ for the key IE. Simply get rid of it by renaming it to zIE — that’s it!

As I had installed IE 6.0, I looked into the registry for its version number “6.0.2800.1106″ and found 7 entries in HKLM, 3 of them belonging to the key “Internet Explorer”: Wizard Version, Version and Build. I looked also into the module iexplore.exe and found this information 4 times. All these 11 occurrences appear to be character data with minor variations in format, but no one was compatible with the design for the Conditional Comments!

So to meet the specifications, a new structure was created, the “Version Vector”. IE reads the information (currently 5.0002, 5.5000, or 6.0000) from there when it is started: if the program cannot find it, it gets the information from the module. This also means that IE has to be closed and restarted to get the change.

Now in case of IE 5.5 we can see the incompatibility which forced the creation of a new structure: CC gives true for “gte IE 5.999″ and “lte IE 5.9990″! As CC cannot be nested there is no way to identify IE 5.5 properly.

For example the following CC’s will work even with multiple IE’s installed:

1. “if IE 6″ or “if IE 6.0″ — for use with IE 6.0
2. “if IE 5″ or “if lte IE 5.5″ — for use with IE 5.01 and 5.5
3. “if IE 5.0″ — for use with IE 5.01
4. “if gte IE 5.5″ — for use with IE 5.5 and 6.0
5. “if IE” or “if lte IE 6.0″ — for use with IE 5.01, 5.5, and 6.0

This CC will still not work when multiple IE’s are installed:

1. “if IE 5.5″ — for use with IE 5.5

To see this run the above mentioned test. For better understanding CC you might want to read About Conditional Comments.

I have tested quite a lot on my Win98, but as the whole structure was build exclusively for CC, I would expect no real problems with later versions.

You can discuss this further at the Skyzyx Support Forums.

• Windows Installer
• Mac OS X Disk Image
• Linux Installer

The Mac platform just doesn’t work the same. I suppose I could just leave the app open, but I have a habit of quitting apps when I’m done with them. Because it always takes Firefox so much longer to start up than Safari, usually I just use Safari for normal surfing, and only open Firefox if I need to do something that requires better JavaScript/DOM/XML/Whatever support than Safari provides.

But today I came across something very, very cool. Firefox builds that are optimized for the PowerBook G4. Instead of waiting the usual 6-7 Dock bounces for Firefox to start up, it only takes one, and everything else about it is significantly faster than the default builds.

I came across the forum for optimized builds over at MozillaZine.org. Here is some linkage:

• Firefox optimized for OSX on a G4.
• Firefox optimized for Panther (OSX 10.3.x) on a G5
• Other Firefox builds optimized for Windows, Mac, and Linux

Firefox is now running zippier than ever on my PowerBook. I hope these’ll help you out!

I’ve gone ahead and added my new server (www.skyzyx.net) to the download list as “Primary Download 1″. I’ve also finally gotten around to adding the MackHosting.com mirror. Chris at MackHosting.com has turned out to be a cool guy that I’ve gotten a chance to talk to a bit via IM. Although he’s not a weblogger, he does offer really good small business hosting plans (100 MB space and 1GB transfer for $30/year). Go give his website some love.

I’ve also been contacted by someone who knows how to enable conditional comments in the Standalone IE’s. I’ve really been lagging on getting this information out to the public, but I’m hoping to get to it this weekend. Keep an eye out.

« Update » I figured out how to get Bit Torrent setup, so you can now download these files via BT too!

This is big news for the Mozilla team. Not only that, but it also means something for the world of web standards and the overall improvement of the quality of the web. The more people who are using a Better Browser™, the more possibilities we as web designers have available to our disposal.

I know that Microsoft’s market share hasn’t slipped that much, but it has been slipping. And seeing over one million people download Firefox in 4 days, just goes to show that things are starting to change. Things are starting to change indeed…

Dead Hard Drive: My 160 GB drive bit the dust last weekend. I’m still at a loss for why. The upshot is that it only took about 15 minutes to get a new 200 GB drive up and running in my system. The downside is that I’ve lost everything besides my boot drive, installed applications, and my music collection (which are all on other drives). The worse part is that any and all work I’ve done on my long-awaited redesign went up in smoke as well. Convenient excuse, I know. I just hope that my new code will be better than my old code.

sIFR: I’ve discovered how cool the Inman Flash Replacement technique is. Even cooler, I’ve discovered the Scalable Inman Flash Replacement Technique (or sIFR for short). This latest version of the groundbreaking technique really improves previous versions.

Firefox 1.0 PR: I’ve been eagerly awaiting the release of Firefox 1.0 Preview Release. The PR release date has been pushed back 9 days from when it was scheduled (according to Planet Mozilla), and I’m trying to keep from biting my nails from excitement. Thunderbird 0.8 is also right around the corner, although I don’t know how close around the corner.

SimplePie: I’ve hit a roadblock in my SimplePie project. I need to figure out a regular expression that will grab self-closing tags (<description />, <tagline />, etc.), without also grabbing normal open-close style tags. I’ve done some tremendous work for v0.94, but I insist on holding back this release until I get the bug worked out. I know that this bug (combined with other elements of the code) effects Ben Hammersley and GoogleBlog, among others. If anyone cares to help me out with this regular expression, please let me know.

A New Church: After several months of looking for a good, solid, scripturally-sound church, we’ve found one. We’ll continue to visit for the next several weeks to really get a feel for the church, but it seems like what we’ve been looking for. I’ve been wanting to get back involved in music and children’s ministries, and this looks like the place for that.

SPG 1.1: Vaporware? That’s the feeling I’m starting to get about the update to Paul Griffin’s outstanding Simple PHP Gallery software. Let’s all go and ask him about it, so that he’ll feel the pressure to finish it. =)

Some Leafs: I’m totally diggin’ the photography in this new Zen Garden design.

Quick-and-Dirty Weather: Using the raw XML (not RSS) feeds from the United States National Weather Service, I was able to hack together my own simple weather RSS feeds. If you’re interested, check out Quick-and-Dirty Weather.

My Daughter: She’s growing up so fast, I can hardly believe it. She gets to be more and more fun as each day goes by. She’s just finishing up her potty training, and we’re going through tic-tacs like crazy. It was really warm when we got home this evening, and we couldn’t find any of her nightgown jammies, she I put her to bed wearing one of my old T-shirts. She was absolutely adorable. She misses us, my wife and I, when we’re gone all day at work, and she’s become vocal about it. It breaks my heart to be away from her all day long (although I’d probably go nuts otherwise), so I’m trying to find reasonable ways to remedy that. *sigh*

Anyways, that’s what’s been going on with me. What all has been going on with you?

Since IE6 supports the correct CSS box model (in “almost standards” mode), I’m not going to bother with the CSS box model hack in the new design. This is 2004 people… get with the program. If users insist on hanging on to outdated technology, then they need to understand that at some point they’re going to be left behind.

Microsoft has left behind Windows 95/98/Me, Apple has let go of anything prior to Mac OS X 10.1.5 (pretty much), and I’ve let go of IE prior to 6.0. At some point, you just need to bite the bullet and let the legacy code go. That’s where I’m at.

If you’re a die-hard Internet Explorer 5.0 user, sorry. If your company still hasn’t upgraded their systems with IE6, either find a new one that’s on-the-ball, or create a fuss to get IE6 installed (if not a better browser like Firefox).

Meanwhile, I recently found out that my cookie script has been recommended on IBM’s forums, my Java detection script has been talked about on Sun’s Java forums, my Message Center 5.5 script is gaining popularity at Coding Forums, and I continue to get help with ideas to improve my Flash detection script (which uses a format that I will soon switch all of my other detection scripts to because it’s more flexible).

I’m aware of two different projects that are using the standalone IE’s: OpTool, which appears to add the ability to load any URL into any browser, and MozIE that allows you to have a split-screen view of a webpage with multiple browsers at once.

I’ve also been contacted about using my Feed Parser engine in an upcoming application he’s writing. Nothing too nailed down yet though, as I’m still working out bugs for a v0.7 release.

Lastly, I came across a site today that points to one of my posts about the browser wars. This is what she had to say:

This article/story about the Browser Wars is brilliant. How the writer has managed to make a fairy story out of the browser wars makes it amusing to read. It provides the story in such a way that you would find it so easy to understand. I feel that he is more biased towards Netscape than to Internet Explorer. He talks about the domination of King Explorer and the Emperor of AOL. But waiting in the wings patiently is Inigo Mozilla.

I think this is the best article I have read in a long time.

Sue Holland

If you missed it when I first wrote it, here it is again.

• Tiger is a fully 64-bit OS… which is gonna allow the PowerMac G5′s to move so fast that they catch fire.
• “Expose for Widgets”, which is super similar to Konfabulator
• “Spotlight” which sounds an awful lot like the planned database-style search integration in Longhorn.
• 30-inch (wipe off your drool) displays
• RSS intregration in Safari

I was able to keep up with the play-by-play via Mac Minute, Apple-X, and Mac Update. You can read more about Tiger from Apple.com.

Lastly, I was able to get copies of these images before they got pulled from the MacMinute.com site. They’re awfully clever.

Does anyone here know what “Haiku” is (…and no, I’m not talking about a 17 syllable Japanese poem)? Haiku is the brand-new name for an open source project that was formerly called “OpenBeOS”.

How many here know what OpenBeOS is? OpenBeOS is a project whose goal is to re-create, from scratch, an open source version of the late BeOS 5. BeOS was a very cool operating system that had many modern-OS features before Windows, Mac OS, or Linux did.

BeOS debuted in the late 90′s as an OS with a 64-bit file system, journaling, protected memory, pre-emptive multitasking, multithreading, and a whole slew of things that we take for granted these days. BeOS was super fast, and ran on both x86 and PowerPC processors.

After BeOS was looked at and passed up by Apple in favor of NeXTStep OS in 1997 (which was the core of Rhapsody, and later the current Mac OS X), Be delved into the “Internet Appliance” market with BeIA. The Internet Appliance market never quite made it into the mainstream consciousness, and in 2001 they sold the company to Palm. Many of the concepts that made BeOS so awesome have found their way into the upcoming Palm OS 6.0 (aka “Cobalt”).

Back to the point, OpenBeOS is trying to recreate the BeOS so it doesn’t die out. Due to trademark reasons (like those that have plagued the Mozilla Foundation), they recently changed their name to “Haiku”, which if you’re familiar with the BeOS (specifically the NetPositive web browser), the name makes sense. They just debuted their new website today.

When I saw it, I immediately thought that it would be awesome to submit to CSS Vault and CSS Beauty, as it’s a very attractive site. However, when I moused-over the image links in the upper right-hand corner, they flickered. “Hmmm… they’re not using Pixy’s Superfast Rollovers? That’s odd. Maybe I should look at their source code…”

I watched in horror as my screen filled up with table tags, invalid HTML 4.01, and more inline styles than I’d seen in quite a while. *sigh* How awful! It’s a perfect layout for web standards too. Grrr… What a waste!

Gmail

I hadn’t noticed this before today because I use Firefox, and it’s never been an issue that’s come up. Today, I needed to fire up a standalone version of IE5/Win, and ended up checking out Gmail in it. Gmail told me I couldn’t log in with my current software. It then proceeded to tell me that I needed to use one of the following web browsers to use it:

• Internet Explorer 5.5+ for Windows
• Netscape 7.1+
• Mozilla 1.4+
• Mozilla Firefox 0.8+
• Safari 1.2.1+

I found that to be very interesting, and actually a very good thing. Since Gmail is a highly-coveted, status-symbol-like service, it may very well make Aunt Ruth upgrade her browser to use Gmail (which will be recommended by her web-savvy nephew). And not only are they modern browsers, but they’re brand-new browsers (kinda)… namely the browsers running the Gecko 1.4 codebase and Safari 1.2. This also means that Mac OS 9 users are out of luck. There are no new browser developments going on for OS9. The latest version of Mozilla for Mac OS 9 was v1.2.1.

Hopefully Google will help make the web world a better place afterall.

I got a GMail invite today. I haven’t used it much yet since today was a very busy day at work, but I like how I’m told I’m using 0% of 1 Gigabyte. Also, Yahoo! Mail bumped up storage space to 100MB for the free accounts (2GB for the paid accounts), and 10MB per email. Teriffic. Now I can email my dial-up friends 9.8 MB emails.

The power went out at work today, so I got to come home a little early. My best friend Eric, who is in the US Air Force, is moving to Texas on Friday for his Navigator training. For those who don’t know what a Navigator is, he’s essentially Goose instead of Maverick (for those who’ve seen “Top Gun”). He came to visit me last night, went to San Francisco to visit his cousin today, and will swing back through on his way back to his parents house where he will be staying until Friday morning when he leaves. =(

I’ve been so enthused about my new PowerBook G4 that I haven’t even tried to get Windows XP re-installed on my desktop computer yet. I need to do that because that’s where all of my web development and graphics software is. And I still miss my Feed Demon (Nick, please start doing cross-platform development on it!).

Lastly, my big redesign that fell through the cracks a couple of months ago when I got a new job and had to start commuting is now back in development. My focus for this redesign is more about the structure, availability, and presentation of data than it is about a visual redesign. However, you should expect a visual change. I’m not too sure how much yet, but there will be a change. I plan on keeping multiple stylesheets, including the one from this current design. My favorite is the current “Default” stylesheet, while I’ve been told that other people still prefer the “Classic” stylesheet. Which of the two should I keep as the secondary or tertiary stylesheet?

It’s the middle of the week (almost). The weekend is right around the corner!

I tried logging in with IE. No problems. I tried again with Mozilla. No problems. I tried with Opera. No problems. I tried with Firefox. Problems.

Is Microsoft beginning to see Firefox as a threat? Is that why they’re blocking access to Hotmail from the oh-so-popular Firefox? Of course, it might just be me wanting to rag on M$ for something else, but it doesn’t appear that they were trying to be subtle about this one.

I’m off to write a nasty letter to them…

I’m not sure if this means anything, but I’ve got the Tab Browser Extensions installed. Last week, I went to click out of Firefox with multiple tabs open, and was presented with the “Close Multiple Tabs” dialog box.

Normally, I close the one to the left, but this time, I accidentally clicked the one in the middle. Oof! The next time I opened Firefox, my tab session was restored. I didn’t want that. So, I went into the Options dialog, and set it to open at my homepage, and it didn’t fix it.

I went back in, opened up a second tab, and closed Firefox. When the dialog came back up again, I clicked the button on the left. It still didn’t fix it. Well crap.

I then decided to check out the Tab Browser Extension box. After digging through there, nothing was fixed. Next I dropped into the nefarious about:config console.

Trying to fix the startup page, I went to browser.startup.homepage. I checked and double-checked the four settings that began with browser.startup., to no avail. I hate filing Firefox bugs, and I was hoping that I could do something to fix it without bothering the Mozilla team.

I finally decided to Google for it. I tried “fix firefox homepage”, “firefox startup problems”, “save tab session and close all tabs”, and a few other variations, and nothing came up. I did, however, come across this page when I searched for the “save tab session” query. It gave me the idea to search the about:config dialog for “tabSets”.

In the “filter” box, I typed in “tabs”. This allowed me to find the fix for the problem. I changed the following keys to the following values. Note that these keys all have browser.tabs.extensions. prepended to them.

Problem solved. Hopefully, this will help someone in the future.

Now, I know that there are other ways to do it, but they require syncing the text on the page with text in your CSS file — which is fine if it’s a permanent header or something. But it doesn’t work as well with blogs.

So, alas, Safari 1.1+ users now can see the use of the text-shadow property on my site, even though I can’t. *sigh*

P.S. I didn’t work entirely blind. I used Dan Vine’s iCapture to see what I was doing.

« Update » Apparently, text-shadow has been in Bugzilla for 5 years! It appears that no one has bothered to write the code for it, and that’s the only reason why it hasn’t been implemented yet.

Quoted from the bug report:

Here’s the layman’s explanation:

1. In the address bar, type about:config and press Enter
2. Search for a Preference named dom.event.contextmenu.enabled
3. Double click its entry and change it to false

Mozilla will now show the context menu even in pages that try to hide or replace it.

How cool is that?

Well, according to the guys over at As the Apple Turns, it appears that the BuyMusic.com experiment was a complete and utter failure. Are we suprised? We think not.

I suppose it was a bad idea to lock out users of Mozilla, Opera, Safari, Linux, MacOS, and other technologically advanced groups of people.

I was recently made aware that all of this was featured on C|Net’s TechTV, as well as on C|Net’s Builder.com site.

Anyways, I just wanted to let you all know that I had a conversation with a little birdie. This little birdie told me something about an upcoming ALA article, and something else about full support for conditional comments, DX filters, and other nifty things that the standalones have been lacking for the last few months.

I don’t know about any timeline other than “soon”. After he said that, the birdie just flew away. Hmmm… strange. *shrug*

I know it must’ve been a strange comination of the two events, coupled with the sandwich I ate just before I went to bed. I had the strangest dream. It was kinda like when Cliff Huxtable had wierd dreams after eating sandwiches on the Cosby Show.

Anyways, when I woke up this morning, I sat down and wrote this. Wierd.

Once Upon A Time…

A long time ago, in a land far, far away, there lived a king by the name of Netscape. The king had rule over a very happy kingdom. Life was good, better and better crops were being produced, and the future looked very bright.

But alas, this king was not perfect. Sometimes he made poor choices, even when his intent was very good. Instead of following in the footsteps of his father, Mosaic, and following the laws that were made before him, he decided to do things his own way. Although those ways seemed righteous and good, the end result was not a positive one.

The king’s half-brother, Explorer — who was also a son of Mosaic, began to grow bitter and envious of his brother’s good fortune at the expense of his own. Although Explorer was not as good, strong, or talented as his older brother Netscape, he vowed to overthrow his brother, the king, and rule the kingdom as he saw fit.

A war broke out. Explorer was outright challenging his half-brother’s right to the throne. Alliances were formed, and shady deals were struck. Explorer was ruthless and intolerant of anyone who was dissident, so at knife-point, he forced nearly all of his allies to either pay tribute to him, or die. Those who would not, had their lives cut short.

Netscape, struggling to keep his kingdom in-tact, also made alliances. Unlike his brother, these alliances were created more out of comradery and respect, rather than Explorer’s that were created out of fear, uncertainty, and doubt.

New weapons were created in this war. Explorer’s research team developed a weapon called “DOM”, while Netscape’s team developed a technology called “Layers”. Even though Netscape’s Layers were intended to be used as a weapon against Explorer, they usually had horrible side-effects that did nothing but harm the people of the kingdom instead. In time, the loyalty of the people was swayed, and homage ended up at the feet of Explorer.

In only three short years, Explorer and his allies had decimated King Netscape’s armies. Explorer was victorious at the end of the “Browser Wars”, and was crowned King of the Web.

Instead of killing Netscape outright, Explorer backed off just enough for another growing empire, AOL, to take the weakened Netscape captive. It was during this time that Netscape had a son of his own. He named his son “Mozilla”.

In time, Explorer’s rule became absolute. The king’s subjects would occasionally talk about “Once upon a time, when Netscape was king,” but for the most part, the people simply forgot all about the ancient days of King Netscape.

Netscape’s role had been reduced to that of an unwanted slave in AOL’s empire. Although Netscape, and his son Mozilla, had much potential and great promise, AOL’s emporer was ignorant and simply disregarded them all-together.

King Explorer and the Emporer of AOL, although previously harsh enemies, decided to call a truce and combine their resources to the goal of world domination. Not long after the truce was called, Netscape was taken out to the gallows and beheaded. Newspaper headlines read “Netscape is dead. There’s nothing to see here.”

After former king Netscape was unceremoniously executed, AOL released Mozilla from captivity believing that he was of no use, and was no threat. AOL couldn’t have been more wrong.

Believing that the only remaining threat had been eliminated, King Explorer was content to simply rest on his laurels. As Mozilla and his two new friends, Opera and Safari, grew stronger, Explorer grew stagnant. He stopped improving, stopped growing, and stopped becoming better.

It is believed that it will only be a matter of time before a grown-up Mozilla meets King Explorer head-on and says:

“Hello. My name is Inigo Mozilla. You killed my father. Prepare to die…”

The posting is by someone who is involved somehow with the IE/Win development team. The question asks: What do you want from the Internet Explorer team? Here’s what a list of what I put. Feel free to add your comments as well, as I’m interested in seeing what other people think.

• Full CSS1 and CSS 2/2.1 support.
• Support for the application/xhtml+xml mime type.
• Full PNG support.
• As much of the CSS3 recommendation (not working draft) support as possible.
• Fix the CSS bug that requires “position:relative;” to fix IE-only bugs in pure XHTML+CSS layouts.
• Support the standard DOM 0, 1, and 2.
• Built-in SVG support.
• Complete support for XML, XSLT, XSL:FO, XForms, XLink, and other emerging XML-based standards.

A few posts later addressed some of the issues that the IE team had expressed concern over.

Another thing that the commenters generally aren’t thinking of is “how to get adoption.” I keep pointing out that if we fixed the CSS and PNG issues, you still wouldn’t be able to use those for years. Why? Cause consumers (and companies) really don’t care about those issues and won’t download a new version just cause you fixed one or two issues.

People don’t care because people don’t know! If the IE development team doesn’t implement them now, then it’ll be even longer before web designers can take advantage of current technology.

What are your thoughts? And what would you tell them to fix if you could?

Support the standards and nothing but the standards, regardless of whether or not browsers get them right?

- or -

Support what standards are available given today’s browser support, and kludge together markup/script/CSS hacks to overcome deficiencies in implementations?

I am all-for the extensive use of web standards. Anyone who’s talked to me for more than two minutes when I’m in geek-mode, or who has read anything I’ve written on the subject knows this.

I would prefer to serve my XHTML pages as application/xhtml+xml, use XHTML 1.0 Strict or 1.1, and have all of my CSS2 work without a hitch. Some people only design for the “trinity” (which I think is a bit of a misnomer — “triumvirate” would be better), being Moz, Opera, and Safari. These kinds of things are fine for them.

Unfortunately, the real world — especially the world of business — requires sites to work as well on IE/Win as any other browser/platform, for no reason other than it hold the largest market share by far. Standards are fantastic, but standards purists are missing something. We couldn’t move on from using tables for layout until CSS was good enough to give us an alternative. Now CSS gives us that (better) alternative, but it’s not flawless — neither the support, nor the spec.

Unfortunately, Microsoft is the driving force on the web. Not “driving” as in progressing, but “driving” as in “this is how it’s going to remain”. I could beat Bill Gates and Steve Ballimer senseless for not implementing :hover on all elements, or :focus on anything. It makes my job as a web designer that much more difficult.

The problem lies with this: Most web designers have a passion for the web, and what it all can be. We want it to move beyond the computer screen and into everything that it possibly can. I can now syndicate another website’s content on my site thanks to the power of the web. How cool is that? Microsoft, on the other hand, just wants control. They want power. They want money. They don’t care about the potential of the web. All of that “Your Potential. Our Passion.” is crap. Hey Microsoft! I wanna be a web designer when I grow up! Are you gonna help me? Where’s your passion now?!

We, as web designers, often say things along the lines of “IE has 90% of the market. We just have to design for them. Oh well.” I disagree with this. On the other hand, standards purists chanting “everyone must code perfectly right now” are wrong as well. We need to transition from the older methods to the newer methods, and that requires us to design standards-compliant sites using necessary (not gratuitous) CSS hacks to make it work.

IE5 was released in 1999. IE 5.5 was released in 2000. IE6 was released in 2001. It’s now 2004. This spring will be three years since the last IE/Win update (not counting SP1). Let’s start putting up “your browser is outdated, please upgrade” messages for Internet Explorer 5.01 now, like we do for Netscape 4.x. This summer, let’s start displaying it for IE 5.5, and hopefully by this time next year a significant majority of people will at least be using IE6 — which will remove the need for the box model hack at the very least, maybe even more.

Promote the use of Moz, Opera, or Safari in these messages, and the Standards-Compliant market share is sure to increase. The more of us who do it, the better the chances. It might not make Microsoft update their browser, but it might make them think about it if they lose enough market share.

In the end, I just chalked it up to Internet Explorer sucking, and left it alone. Recently, however, my question was answered.

For elements that act as though they were relatively positioned, then go ahead and use position:relative; on it. It seems to fix it without a hitch.

Just thought I’d pass this along.

Most real web designers already know this. Most who don’t are generally either amateurs or are way, way behind the times. You’d think that with all of the money, power, and research and development resources Microsoft has, that they could produce a web browser better than crap. Apparently I’m mistaken.

Langridge Image Replacement

I’ve been using the LIR technique for swapping out text in favor of images for a while now. While no image replacement technique is perfect, LIR is better than the alternatives (namely FIR). What I like about LIR is that is does not require any extra HTML “hooks” to pull it all off. I know that FIR requires additional <span> tags.

Now, here is some sample XHTML markup for your basic LIR method:

<h1 id="header"><a href="/">Skyzyx.com</a></h1>

Simple enough, right? We have a top-level heading (<h1>) that encloses a link (<a>). Got it? Cool.

Here would be the CSS used to swap out the text in favor of an image:

h1#header, h1#header a {
	display:block;
	margin:0px;
	padding: 0px;
	overflow: hidden;
	width:710px;
	height: 80px;
}

h1#header a {
	padding: 80px 0 0 0;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
	height: 0px !important;
	height /**/:80px;
}

Now, what’s going on here? Well, the first rule sets up the parameters for both the <h1> tag and the <a> tag. Shared properties require less space than writing the same things twice, obviously. The second rule is only for the <a> element nested inside the <h1> element.

Starting with the first rule, display:block; says that we want to make both tags block-level elements. Since <h1> already is, this really only effects <a>. Since you can’t apply width and height properties to inline elements, we need to set the inline <a> element to block-level.

Setting the margin and padding to zero allows us to keep the box exactly the same size as the width and height — no more, no less — which is what we want. Since there is no margin or padding (as well as no border), Internet Explorer’s faulty box model issue doesn’t apply… yet.

The next property is overflow:hidden;. This says that any content inside the box (being the <h1> and <a> elements) that stretches outside the confines of the width and height will be hidden. That’s good, as that’s exactly what we want. But there is a slight problem here, as we will get to in a few minutes.

Lastly, we specify the width and the height that we want for the replacement image. At this point, you can still see the text, but we’ll get to that in a minute. We have now established the properties that the <h1> and the <a> have in common. Once again, Internet Explorer’s faulty box model issue has not come into effect yet, but it will… and we’ll be ready.

In the second rule (repeated from above):

h1#header a {
	padding: 80px 0 0 0;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
	height: 0px !important;
	height /**/:80px;
}

The first thing we do is overwrite the original value for the padding property with a new value. Note that this entire second rule only effects the <a> element, and NOT the <h1> element.

Here’s the concept behind this method: The correct box model (properly implemented in Gecko-based browsers like Mozilla and Netscape 6/7, as well as Opera) says that if you give an element a certain width, then that will be the width of the “content”.

Padding is empty space inside the box. If padding is applied, it will constrict the amount of room inside the box, which is good for giving space between text and any borders that may be around the box.

Margin is empty space outside the box. If margin is applied, it pushes outside elements away from the box, which is good if you want an element to be a certain distance away from another element. As an example, the content of this page has 50 pixels of margin on the top as well as on the bottom. That’s why you can see the grid behind it.

Border is exactly that… a border around the width of the box. You can set a border of 1 pixel, 2 pixels, 3 pixels, 50 pixels, or whatever you want. This all takes up space, and this space is taken outside the box, but before the margin is applied.

Apparently, according to these sources, although the box is made up of the content width + the padding, the actual width only applies to the content itself. This doesn’t make much sense to me, but that’s just how it is anyways.

The problem with the Internet Explorer box model is that instead of having the widthall of that stuff (content+padding+border+margin) has to fit inside the width. Oh no! (By the way, when I say “width”, the same issue occurs with the “height”.)

The way that this method works is that we create a “box”, eliminate all height, apply padding to hold the box open (to push the content text down below the border of the box), use overflow to hide that text, and then set a background image to it. Simple really.

But as I always say, “one horrible CSS rendering bug deserves another” (well, I don’t really always say that, but that’s what we’re going to do here).

Back to our regularly scheduled program, next we set the padding-top property to the height that we want to end up with, while setting the other paddings to zero. This will be critical to pulling this off.

After that, we address the background property. Here, we’re combining several background rules at once. We want the background color to be transparent, we want the background image to display (don’t use quotes for this, as IE5/Mac will crash), set the background to not repeat, and have it begin in the top-left corner.

This next part is what brings it all together. Internet Explorer 5.x doesn’t properly implement !important, so when other browsers see the !important, they’ll not allow the next line to overwrite this line.

We want to set the height to zero. Why? Because setting it to zero means that everything inside of it will be hidden because of the overflow property we set earlier. And since we set padding inside it, the element is held open by this padding… which gives it plenty of room to show the background image.

The last part of this whole equation is the box model fix for Internet Explorer 5.x. In this example, we use height /**/:80px;. IE5.x doesn’t properly handle !important, so when it comes across this line, it re-adjusts itself. Since IE5.x needs everything to be within the width (or height in this case), this fixes it’s problem.

Internet Explorer 6.0 also doesn’t understand !important, but it does have a parsing bug that this last line utilizes, so that IE6 never even sees it. Pretty nifty, huh?

Next…

Now, I explained all of that so that this next part would make sense. This method can be used with any element. Normally it’ll be an h-something tag, but what if you wanted to use a <div> tag? Well, it’d work just fine, except in IE5/Mac. Ethan Marcotte has shown us how to fix this.

h1#header, h1#header a {
	display:block;
	margin:0px;
	padding: 0px;
	overflow: hidden;
	width:710px;
	height: 80px;
	clip:rect(0, 710px, 80px, 0);
}

h1#header a {
	padding: 80px 0 0 0;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
	height: 0px !important;
	height /**/:80px;
}

Repetitive to be sure, but it works just great. However, there’s still a slight problem with Internet Explorer. This is a quirk that I noticed just recently in Internet Explorer 6.0, and was able to verify as bugs in earlier versions of Internet Explorer. For whatever reason, tiny bits of the tops of the letters peek up higher than they’re supposed to.

After looking around for information, I came across a site that said to set a negative indent for the text inside the link. So that’s what I did.

h1#header, h1#header a {
	display:block;
	margin:0px;
	padding: 0px;
	overflow: hidden;
	width:710px;
	height: 80px;
	clip:rect(0, 710px, 80px, 0);
}

h1#header a {
	padding: 80px 0 0 0;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
	text-indent: -1000em;
	height: 0px !important;
	height /**/:80px;
}

It works! Great! Now I’m off to the ne– wait a minute. What happened to the image in Internet Explorer 5.0? Where’d it go? Oh no! So, I got rid of the text-indent property, and took a look again. The image was back. Apparently, the text-indent property also moves the background image in IE 5.0. 4.01 and 5.5 get it right, but 5.0 screws it up. Sheesh!

I spent a few more minutes working with it, and decided to try something. In the first rule, the one that included both the <h1> and the <a>, we set the following property: overflow:hidden;. And since the <a> is nested inside the <h1>, if the <a> element is taller than the <h1> element, then the extra height will be hidden! Sure enough, it worked.

After getting rid of the text-indent property, I added 10 pixels to the height of the <a> element. Here was the final chunk of CSS code:

h1#header, h1#header a {
	display:block;
	margin:0px;
	padding: 0px;
	overflow: hidden;
	width:710px;
	height: 80px;
	clip:rect(0, 710px, 80px, 0);
}

h1#header a {
	padding: 90px 0 0 0;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
	height: 0px !important;
	height /**/:90px;
}

Kids, don’t try this at home.

Hat tip: Taylor McKnight.

To save some people the hassle, I’ve gone ahead and zipped each stand-alone installation and made them available for download. I’ve tested them on Windows 2000 and XP. You’d just need to upgrade your Windows 2000 installation with Internet Explorer 6.0, then download and unzip these files wherever you want (I put them in my Internet Explorer folder, myself).

Update — Just so that everyone is aware, the official version number of Internet Explorer 4.01 is v4.01. The internal version number for Internet Explorer 4.01 is v4.72. Why? I’m not sure, but this is the case. Some websites are reporting that you can download IE 4.72, when they really mean IE 4.01. Blame Microsoft for the confusion.

Update: Dec 3, 2003 — Just wanted to say hello to everyone visiting from the Web Standards Project and WebMonkey.

Update: Feb 16, 2006 — Looking for IE7 info? Find it here: Internet Explorer 7.0 Beta 2 Standalone is available

Update: Jan 1, 2008 — A company called Tredosoft has put together an installer that comes with fixes for things like cookies and conditional comments. Check it out!

• Microsoft trying to control blogging.
• Gator tries to shed it’s self-inflicted unpopularity by changing it’s name to Claria.
• Napster’s back (well, it’s pretending to be…).
• MSN splits in two.
• Mozilla Firebird is a viable (and better) alternative to Microsoft Internet Explorer. Well, duh!
• Eolas, don’t make the W3C smack you down…

I’m still working on a name for the site, along with some artwork and other types of propaganda. This can be used kinda like the WaSP’s “Browser Upgrade Campaign” that was recently disbanded, except to push for non-IE browsers. We’ll see how it all goes.

• “Get Ready for IE Changes” – What Do I Know?
• “Eolas Fallout” – Mezzoblue
• “Changes to IE” – All In The <head>
• “The Eolas matter” – Sidesh0w
• “Changes to Internet Explorer” – Gemal’s Psyched Site
• “Dance, Microsoft, Dance!” – YoungPup
• “Microsoft tweaks Explorer to address ruling” – News.com
• “Microsoft Details Changes to Internet Explorer in Wake of Eolas Suit, Mozilla Foundation Issues Statement” – MozillaZine

Also, there are some technical documents regarding how to alter your web content so that the user experience continues to remain seamless coming from Microsoft, Apple, Real Networks and Macromedia.

First SCO and their UNIX scam, and now Eolas. What’s next? Will Nintendo claim to have a patent on the GUI?

I think Todd Dominey says it best:

Whichever way, the new workarounds will lead to page bloat, additional server-calls, confusion, and additional monetary expense / time suckage for businesses and web developers everywhere. Yay Eolas.

Ever since I rolled out version 21.0 of my website in early August (dubbed “Oxygen 2003″), I’ve been using FIR technique to swap out text for images in CSS browsers. Today, I realized that it presents accessibility problems for screen readers such as JAWS and IBM Home Page Reader. They understand the CSS display:none;, but they don’t understand media types (same issue with WebTV/MSN-TV — they understand @import, but not media types — doh!). Also, FIR fails in IE5/Mac.

After Googling for some time, I came across the LIR method. Which seems to cover that base. I’m still not sure about IE5/Mac though. I won’t be able to test it out until Monday when I get back to class, but I can’t really edit it in class. So I have to go to class, view in in IE5/Mac, go home after class and modify the CSS, go back to class the next day to view it again, etc., etc.

What I’m hoping for is a wonderful reader to check this out in IE5/Mac and tell me what’s going on. That’d be absolutely wonderful! Any takers?

Another problem, per say, is that it uses non-semantic markup, meaning mark-up that has no content-related purpose. It’s only purpose is for presentational purposes, which is a big no-no in semantic circles. Nevermind that we’re no longer using tables for layout, but I guess wrong is wrong nonetheless.

A Simple FIR

Your basic FIR technique will replace text with an image by nesting a <span> inside of a parent element. You then hide the <span>, and apply sizing and a background image to the parent element.

Here’s some sample HTML:

<h1><span>Skyzyx.com</span></h1>

Simple, right? Now here’s some sample CSS to go with it:

h1 {
	width:710px;
	height:80px;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
}

h1 span { display:none; }

A Sample LIR

As noted above, the Fahrner Image Replacement technique has a few problems. This method remedies at least two of them (semantics and screen readers), but I’m still not sure about IE5/Mac.

Here’s some sample HTML:

<h1>Skyzyx.com</h1>

Even simpler, right? Now here’s some sample CSS to go with it:

h1 {
	width:710px;
	padding: 80px 0 0 0;
	background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:80px; /* for IE5/Win's bad box model */
}

What this does instead is it keeps the original text there, as-is. Screen readers can read it.

Next, instead of setting the height: property, we set the padding: property as our height — only the top padding value, though. This creates room for a background image but no room for text to show up.

We set overflow: to hidden so that the pushed-down text is not visible in CSS browsers.

Unfortunately, “The World’s Most Popular Browser™” screws things up with the faulty box model. So, we add the last line of CSS to fake-out IE 5.x for Windows and force-feed it the value it needs for all of this to work out, by exploiting a CSS rendering bug found in those versions.

Voila! After testing this method in IE5/Mac, I’ll know if we killed two or three birds with one stone. Kudos to Stuart Langridge for this new method!

« Update » Yes, the LIR method works great in IE5/Mac. Unfortunately, clicking on the main header doesn’t return you to the homepage, so I’d like to work that out. Until then, I think my IE5/Mac users can get by okay since my navigation is pretty simple to understand. Good news indeed!

Call it preaching if you will, but it is always better to design sites in standards-compliant browsers first (Mozilla, Firebird, Safari, Netscape 7, IE5/Mac), then almost-compliant browsers next (IE6/Win), then the subpar browsers (IE5.x/Win), then in crap browsers (Netscape 4.x). I always develop in Mozilla or Firebird. Often times, I completely forget to check to see if IE can swallow the valid code. Then I’ll go back and check in in IE, and when I get to class, I check it in the default IE5 on Windows 2000.

It’s really a better way to do it.

Another thing that Zeldman goes into in his book (referenced by the Mezzoblue article, Designing with Web Standards), it that “backwards compatibility” is a myth. You cannot legitimately make a site look as good in Netscape 4 or Netscape 3 as it does in current generation browsers. “Pixel-perfect” is a flawed mentality. What about PDA’s, web-enabled cell-phones, WebTV (MSN-TV), or other non-standard devices? There are far more users of these devices than there are of Netscape 4, but many people still believe that it needs to look the same in this archaic browser as it does in newer ones.

The truth is that far more browsers can get get the information from your website (being more important than the look) if you code to standards (XHTML+CSS, no FONT tags, no TABLEs for layout, etc.) than if you try to make it pixel-perfect for far-from-perfect older browsers. Instead of designing for backwards compatiblity (an ever-decreasing market share), we should design with forwards compatibility in mind. Websites that won’t break with the next new browser. Websites that can be completely redesigned in hours instead of weeks or months. Standards-compliant websites also tend to be more accessible without even trying, and nearly always end up very high in search engine rankings, making your site much more noticable to more people.

Also, once you get the hang of CSS-Positioning, you can do anything with XHTML+CSS that you can do with HTML+Tables. To say that CSS sites are ugly is simply because of the fact that there aren’t as many CSS designers as there are CSS coders. So, let’s change that. CSS Zen Garden is a great example of what can be done with XHTML+CSS, and the limits (or, rather, lack thereof) of this method of designing… and it all begins with downloading and installing an awesome standards-compliant browser (Mozilla, for example) and start designing more of your websites from there.

Go ahead, give it a try…

about:config allows you to mess with all sorts of nifty things, like enabling general.smoothScrolling and timebomb.first_launch_time, whatever that is.

Supposedly, Gecko 1.4′s ability to understand ActiveX objects is limited to Windows Media Player. I haven’t had any time to test yet, but I’m hoping it supports other plug-ins as well. I’m sure it doesn’t support Windows Scripting Host, but who says it never will?

In my spare time, I’ve been working on a wholesale produce accounting / inventory program written in XHTML, CSS, JavaScript, and Windows Script, tied together with Microsoft HTA technology. The only problem with this Windows-only solution is that it’s a Windows-only solution. What about MacOS, Linux, BeOS, OS/2, Solaris, Irix, and other systems? I believe Gecko is the answer. I either need to learn JS/IO or Gecko needs to try to support WSH. We’ll see what happens.

On the other end, 1.4 is replacing 1.0 as the stable branch for Gecko. This is great, as much has changed in the last year since Mozilla 1.0 came out. 1.4 also marks the end of the SeaMonkey project in favor of the Firebird project focused around the former “Phoenix” project.

Apparently, the thing that was in the box was a sharply discounted PowerMac G4. As expected, Steve Jobs’ “Steve-note” announced the August availability of the PowerMac G5 based on IBM’s 64-bit PowerPC 970 chip (a derivative of the IBM POWER4 chip with native 32-bit support and the AltiVec™ multimedia instruction set), officially ditching Motorola and all their stagnant PowerPC 8500 development efforts for the PowerMac.

The Upside: With Dual 2.0 GHz 64-bit PowerPC 970 RISC processors, up to 8 GB PC3200 memory, 500 GB hard drive space, and an ATi Radeon 9800 Pro with 128 MB DDR-SDRAM, it’s enough to make any hard-core computer geek jerk-off.

The Downside: I haven’t seen an uglier enclosure since the days of the Beige G3′s. I actually like the beige better than this. Whereas the G3 and G4 models had a very nice looking, natural, organic feel to them, the PowerMac G5 looks like a piece of military-style steel flooring folded around a set of technological components. If Jonathan Ive is the one who designed this, then the man needs to be institutionalized. And if Steve Jobs actually signed-off on the design, then he’s doing no better.

I was going to buy one of the upcoming G5′s for my college graduation in February, but if this is the case, I’ll just upgrade my existing PC. It is my hope and prayer that Apple is just pulling our legs, and will release a much more beautiful enclosure when the system debuts in August.

If I can expect this or better in 1.4 Final, then I believe that 1.4 will be an excellent new stable branch for Netscape, CompuServe, Camino™, and other Gecko browsers to base their work on.

Apparently, further updates of IE/Mac will only occur within the MSN for Mac OS X software. Supposedly this decision was made so that Apple could push Safari, Apple’s lightning-fast browser for Mac OS X 10.2 or later, without having fight with Microsoft on the desktop.

Everyone seems to be wondering what in the world Microsoft is doing cutting off IE at the knees. About a year ago, I was reading an article discussing how Microsoft would probably phase out Internet Explorer in favor of MSN Explorer internet software. Now that AOL has signed a seven year deal with Microsoft to continue using IE in it’s own AOL software (despite the fact that AOL owns Netscape), Microsoft may be getting lazy. Either that, or they’ve got something evil in mind…

Remember that 1.4 is going to replace 1.0 as the stable branch for Netscape, CompuServe, Camino™, and other Gecko™-based browsers.