Developers: Stop Whining About IE6


I’m sick of the developer community whining and moaning about IE6. It’s amazing how many different campaigns have been created in an attempt to get people to upgrade. From the simple brochure sites like to the unethical IE6 update script which tricks a user into thinking an IE upgrade is a critical update. There was even a CNN story about the anti-IE campaign on the front page (which I think they ran mostly because they stood to benefit from people upgrading). And lets not forget the jovial tweets when news broke that YouTube would be dropping support for IE6.

The only major site that has a valid plan for leaving IE6 behind is which was a business decision. According to their stats, IE6 accounts for 10% of visits and 5% of all pageviews. The biggest IE6 headaches for Digg is supporting the functionality to digg a story, bury a story, or leave a comment. IE6 only accounts for a mere 1% of these actions which Digg can’t justify the extra development time needed to support them for such a small group of users. They even conducted a survey to find out why people don’t upgrade their browsers with a majority of the respondents stating they aren’t allowed or they don’t have the proper rights to install new software on their computers.

Digg IE6 Survey chart

All of this hoopla so the lives of developers are easier. After all it is the job of developers to build a site and make sure it works across a variety of operating systems, browsers, and devices in order to serve its audience. Martin Ringlein put it best in his post Stop being a dick, support IE6, “We are in the business of creating usable, accessible and intuitive experiences for our users; we are not in the business of changing users, user agents and user behavior all in a pursuit for what we’ve deemed a ‘better’ web.”

I became a developer because I enjoyed solving problems. Internet Explorer is just another obstacle to get over when solving a problem. Rather than wasting energy on things I couldn’t control like trying to persuade the public to upgrade, I dove into learning how to get past the quirks of IE. Here are my 5 tips:

  1. Start with a reset stylesheet – This removes any default styles set by the browser so you can start styling on a consistent base. I prefer Eric Myer’s CSS Reset Reloaded , but there are many to choose from.
  2. Use a strict HTML doctypeDoctypes tell the browser how to interpret the HTML and transitional and loose doctypes introduce rendering quirks known as triggering “quirksmode“. Any XML doctype (including XHTML flavors) triggers quirks mode in IE as well.
  3. Don’t be afraid of CSS conditional hacks – Did you know you can send IE a different property by putting an underscore in front of it? It works like this:
    .style {
    margin-left:15px; //Caught by every browser
    _margin-left:10px; //Caught by IE 6 & 7
    .margin-left:8px; //Only caught by IE6

    You can also use conditional stylesheets to serve different stylesheets but that becomes difficult to maintain.

  4. Learn to love the AlphaImageLoader filter for transparent PNGs – There is no way around it.
  5. Learn to clear floats the simple way – Just set the “overflow” property of the container to auto or hidden and set the width or height to something other than auto. This applies to all browsers not just IE. I hate seeing the overly complicated clearfix solution.

Other tips for taming IE quirks:

So if studying up on these workarounds and techniques sound like too much work, then maybe you shouldn’t be a developer. Perhaps a professional lobbyist is right up your alley. They’re pretty good at ignoring the details of reality.

Here’s a list of some of the more prominent anti-IE6 sites:

And David DeSandro agrees with my attitude towards IE6.

Two Unreleased Gadgets That Caught My Eye

Zune HD

Yup, I’m a Zune fan. Gizmodo has a video of the buttery-smooth animation used in the Zune HD interface.

I’m sold after it comes out this fall.

HTC Magic

The successor to the T-Mobile G1 has been unveiled by Google who gave out 4,000 of them to the attendees of the I/O Conference. After further prodding it is revealed that the phone uses a T-Mobile SIM card which pretty much seals the deal that it will land with the magenta carrier.

HTC Magic G2

Initial reviews indicate the battery life is acceptable, lasting at least through the work day with 3G on. This covers two of my three requirements for a new phone.

No word on when this phone will officially launch.

IE Gets A CSS Rule Right

Web developers like to rag on Microsoft’s Internet Explorer every chance they get due it’s sub-par support for HTML/CSS standards. But one thing Microsoft did get right was support for background-position-x and background-position-y. The background-position property lets you control the placement of the background image of an element. Background-position-x and background-position-y let you control the placement independently.

What are some practical uses of controlling the background position independently? Take a card game, for example. Instead of assigning a separate background image for each card you could make a single image that has all the cards in a grid (see below). To show every card you would only need 18 classes: 1 for the common card styles, 4 for the background position of each suit, and 13 for the background position of each value (Ace, two, three etc.)

The CSS for the image above would look like this…

.card {
/* Suites */
.clubs { background-position-y:0%; }
.diamonds { background-position-y:25%; }
.hearts { background-position-y:50%; }
.spades { background-position-y:75%; }
/* Values */
.ace { background-position-x:0%; }
.two { background-position-x:7.5%; }
.three { background-position-x:7.5%; }
.four { background-position-x:7.5%; }
.five { background-position-x:7.5%; }
/* etc. */

The HTML would be simple, elegant, and look like this:

<a class="card hearts five">Five of Hearts</a>
<a class="card spade jack">Jack of Spades</a>

Alas if only life were that simple. Currently only IE 5.0+ and Safari 1.2+ support background-position-x and background-position-y. Every other browser ignores the properties, defaulting to the upper left position.

Instead this is how the CSS code would look if you were writing it for support with all browsers…

/* clubs */ 
.ace-clubs { background-position:0% 0%; }
.two-clubs { background-position:7.5% 0%; }
.three-clubs { background-position:15% 0%; }
.four-clubs { background-position:22.5% 0%; }
.five-clubs { background-position:30% 0%; }
.six-clubs { background-position:37.5% 0%; }
.seven-clubs { background-position:45% 0%; }
.eight-clubs { background-position:52.5% 0%; }
.nine-clubs { background-position:60% 0%; }
.ten-clubs { background-position:67.5% 0%; }
.jack-clubs { background-position:75% 0%; }
.queen-clubs { background-position:82.5% 0%; }
.king-clubs { background-position:90% 0%; }
/* spades */ 
.ace-spades { background-position:0% 25%; }
.two-spades { background-position:7.5% 25%; }
.three-spades { background-position:15% 25%; }
.four-spades { background-position:22.5% 25%; }
.five-spades { background-position:30% 25%; }
.six-spades { background-position:37.5% 25%; }
.seven-spades { background-position:45% 25%; }
.eight-spades { background-position:52.5% 25%; }
.nine-spades { background-position:60% 25%; }
.ten-spades { background-position:67.5% 25%; }
.jack-spades { background-position:75% 25%; }
.queen-spades { background-position:82.5% 25%; }
.king-spades { background-position:90% 25%; }
/* hearts */ 
.ace-hearts { background-position:0% 50%; }
.two-hearts { background-position:7.5% 50%; }
.three-hearts { background-position:15% 50%; }
.four-hearts { background-position:22.5% 50%; }
.five-hearts { background-position:30% 50%; }
.six-hearts { background-position:37.5% 50%; }
.seven-hearts { background-position:45% 50%; }
.eight-hearts { background-position:52.5% 50%; }
.nine-hearts { background-position:60% 50%; }
.ten-hearts { background-position:67.5% 50%; }
.jack-hearts { background-position:75% 50%; }
.queen-hearts { background-position:82.5% 50%; }
.king-hearts { background-position:90% 50%; }
/* diamonds */ 
.ace-diamonds { background-position:0% 75%; }
.two-diamonds { background-position:7.5% 75%; }
.three-diamonds { background-position:15% 75%; }
.four-diamonds { background-position:22.5% 75%; }
.five-diamonds { background-position:30% 75%; }
.six-diamonds { background-position:37.5% 75%; }
.seven-diamonds { background-position:45% 75%; }
.eight-diamonds { background-position:52.5% 75%; }
.nine-diamonds { background-position:60% 75%; }
.ten-diamonds { background-position:67.5% 75%; }
.jack-diamonds { background-position:75% 75%; }
.queen-diamonds { background-position:82.5% 75%; }
.king-diamonds { background-position:90% 75%; }

That’s a class for each card or 52 for those following along at home. Bloat city.

So kudos to Microsoft for letting developers be flexible in at least one area. Now if all the other CSS properties were as flawless as this we would be in business.

Walkthrough: Setup Multiple IE Virtual Machines On A Mac

One of the most dreaded tasks every web developer faces is testing their pages in the multitude of browsers to make sure everything is working as it should. Until recently, that required having multiple systems lying around. Microsoft only let you install one version of Internet Explorer (IE) at a time due to the fact that it is built deep into the system kernel. Apple used to keep Safari to itself on the Mac operating system leaving the only option of buying Apple hardware to get at the browser.

While there have been several stand-alone versions of IE cobbled together, I just don’t trust them like a fresh native install. And it’s good to see how a site renders with the text rendering engine of the Mac versus the Windows rendering system. Now with virtualization tools like VMWare Fusion, we can have it all.

After installing VMWare and an instance of Windows you may be tempted to set-up another virtual machine specifically for another version of IE. But this is foolish because each XP virtual machine can take up a good chunk of harddrive space. Fortunately there is another way to accomplish this while saving a heap of space.

Below are the steps I took to download the free Virtual Disk images that Microsoft provides with a bare minimum installation of XP or Vista and IE6, IE7, or IE8 Beta. All that we need to do is convert them to a format that VMWare can use and we’ll be in business. The basis of this walkthrough came from Running IE6, IE7 and IE8 on your Mac by Jeremy Gillick. So let’s dive in…

  1. Go and download the version(s) of IE that you want from Microsoft. This can be anywhere from 330MB – 3GB
  2. Download We’ll use this to convert the Virtual PC disk images to a VMWare compatible virtual disk.
  3. Start up your virtual XP machine and drag the two files onto the XP desktop.
  4. Un-zip to your C:/ drive so it will be easier to find later.
  5. Speaking of making things easier, it would help to rename the folder Qemu-0.9.1-windows to qmenu. This will come in handy later when we are typing up a storm on the command line.

    The file structure of qmenu.

  6. Double click IE7-XPSP2_VPC.EXE to extract the image. Save it to C:\qmenu. You should now see a .vhd file in your qmenu folder. Size wise it should be a little over a gig.
  7. Again, to make things easier to type later we shall rename XP SP2 with IE7.vhd to XPSP2IE7.vhd

    Renaming the VHD file for simplicity.

  8. Now it’s time to do the conversion via the command line. Fire it up by going to Start -> Run and typing cmd. Then press enter to launch the command line.
  9. Navigate to the qmenu directory by typing cd c:\qmenu
  10. Now type this line to run the actual conversion process: bin\qemu-img.exe convert -f vpc C:\qmenu\XPSP2IE7.vhd -O vmdk XPIE7.vmdk

    This is what you should type into the command line to convert your image.

  11. You will know it is working because all you will see is a blinking cursor on a new line. The amount of time it takes to finish converting can be anywhere between 10 minutes and an hour depending on your CPU.
  12. When you get back the C:\qmenu> with the blinking cursor you will know the process has finished. There will also be a new file called XPIE7.vmdk in your qmenu folder.
  13. Copy XPIE7.vmdk back to OS X by simply dragging it out of the VMWare window and onto your Mac’s desktop.
    Copy the VMDK to OS X
  14. Open VMWare Fusion and create a new virtual machine by going to File -> New.
  15. Go through the wizard and once you get to the Virtual Hard Disk page, expand Advanced disk options and check Use an existing virtual disk. Use the drop down to select Other… and go find the .vmdk file you just copied over.

    Setting up the VMWare image.

  16. Finish the wizard and boot it up. If prompted to upgrade the virtual harddrive, click Yes.
  17. Install the VMWare tools by going to Virtual Machine -> Install VMWare Tools as soon as Windows boots up. Now you’re done!

    Install VMWare Tools for better performance.

You should have a dedicated IE machine that you can test your web pages in. Mine weighs in at a mere 1.06GB compared to the typical multi-gigabyte requirement of a full install.

Final IE7 Install

Before you go rushing off in a state of web development nirvana, it should be noted that you will have to do this every three months as the Virtual PC images that Microsoft gives out expire. This is done to deter free loaders from using the OS for real work. But since you should only use it for testing purposes, it won’t be a big deal to delete the image and start this process anew every couple of months.

Happy testing!

Irony: MacBook Pro And A Zune

Irony:A MacbookPro and a Zune (closeup)

That’s right, I use a Zune with my MacBook Pro and it works just fine.

Irony:A MacbookPro and a Zune (wide)

Microsoft’s InkSeine Offers An Intuitive Tablet Interface

I was churning through my array of video podcasts this morning on my commute when I came across this 3 minute demo of InkSeine which stopped me dead in my tracks. InkSeine is a prototype ink application designed from the ground up to completely rethink how people interact with tablet computers. Gone are the menus that run across the top and instead are replaced with contextual gestures that can appear anywhere on the screen. Take a look at the video to see what I mean.

Technology like this would be really useful on a touch-screen mobile device, say maybe like an iPhone? At any rate it is interesting to see new interactions with a computer minus the mouse and keyboard.

Use MSGView For Viewing .MSG Files

On my commute home from work this evening I came across a lost thumb drive at one of the metro stations. I decided to take it home and see what was on it. As much as I would have loved to stumble across some top secret military documents or a bunch of MP3 files all that was on the 128mb drive was some miscellaneous e-mail messages. Being the good samaritan that I am, I decided to reconnect the device with it’s rightful owner.

The e-mails were all .msg files, the file extension for Outlook message files. Since I don’t have Outlook installed on any of my computers or a program to read them I had to find some freeware to do the job. After a quick Google search I found the no frills MSGView from Priasoft. The program is a single executable (with nothing to install) that prompts you to locate a .msg file upon starting it up. From there it decodes the message from the proprietary Microsoft e-mail format and shows you the contents. The biggest pain was that I had to close MSGView and re-open it if I wanted to look at another e-mail document.

MSGView Screenshot from Priasoft

I decided to sort the e-mails by file size in hopes of uncovering a conversation that sheds light on who the owner is. After a couple minutes of sleuthing around I quickly connected the dots and found the name and e-mail address of the likely thumb-driveless metro rider. I sent them an e-mail and have yet to hear back from them but I did learn about MSGView which comes in handy in situations like this.

XBMC Recruiting For Mac Port

The clever hackers that brought a media center platform to the original Xbox are at it again. Last May the group announced they were porting the Xbox media center platform to Linux and needed some help from other Linux developers. Now they are putting out a call for OS X developers to help port the software to the Apple operating system.

The original XBMC project brought photos, music, and videos from the PC to the TV. While not the easiest to set-up, I found XBMC to be the most flexible media center software I have ever dealt with. Since September of 2005, I have been watching all of my downloadable content like podcasts and webisodes from the comfort of my couch. Using a hacked Xbox and my home network I could easily stream standard definition content to my TV. Remember, there wasn’t a big boon of HD content available back then like there is now, not that the old Xbox hardware could handle the demand of even 720P video.

XBMC Windows Media Center Skin

So if you know a Mac geek that can do some C/C++ programming send them over to the XBMC guys. The more open-source media projects that are available to compete against Windows Media Center and Apple Tv/Front Row the better it will be for digital media as a whole. And this time around XBMC won’t need to be hacked together to get it working though a name change for the project might be necessary. Just imagine this thing running on an Apple Mini in your living room connected to an HDTV. Sweet!

Microsoft’s Zune 80 Is A Joy

Around the end of October my Creative Zen Vision:M suddenly died on me during my morning commute. It’s no surprise that the player finally pooped out after being with me every workday for 2+ hours a day since I got it on Christmas, 2006. It was a fine media player and I would have gotten another one except Creative wasn’t making them anymore. Besides, the new Zunes were out with better features at a much cheaper price. So naturally I decided to “join the social.”

One of my favorite features of the Zune is how it keeps your place in the song or video after powering down. This makes it a breeze to pick up where you left off without fuddling around with bookmarks and now I don’t even hesitate listening to a podcast for a short drive. With my Creative Zen Vision:M I would spend more time loading and saving my place than driving on short trips. This feature is not important if you listen to music most of the time, but a podcast junkie like myself is always starting and stopping episodes and it is a relief to have a player take care of marking the place in my audio and video files for me.

Zune 80 Front and Center

The physical design of the Zune 80 is compact and simple. The player consists of two buttons, a large 3.5″ screen and a squircle for navigating. The squircle is a combination of a touch surface and button interface. Using your thumb you can flick up or down to move through list items just like an iPhone or press up or down for more precise navigation. Holding one edge of the squircle down will gradually speed up the seeking of a list when you need to go through a lot of items. To help you stay oriented as songs scroll by, the player will show the first letter of the track in a big, easy to read font so you know when to slow down. Basic categorization like Artists and Genre is available along the top which is accessed by moving left to right. To the right of the squircle is a play/pause button which is also used as an on/off switch when held down. On the other side is a back button. Navigating around the Zune is a real pleasure and a big improvement over the Zen player I was previously using.

The dimensions are pretty much like any other hard-drive based media player on the market. The Zune 80 is thinner than my Zen Vision:M and is probably just as thin as an iPod but I don’t notice the difference during everyday use. The player fits in my backpack and in my jacket pocket and that is all I really need to carry it

A Zune 30 would have been sufficient for my needs at the discounted price and with the newer Zune 2.0 interface, but the newer Zune 80 packs better video hardware. Formerly left to transcode MP4 files for playback on my Zen, the Zune has no problem playing these processor intensive video formats natively. Lots of podcasters offer their video up in the iPod-friendly MP4 files and since I have a device that supports the codec, a bigger selection of content is available to me. With the latest firmware update, I can now unsubscribe from a podcast feed right inside the player on the go making it easy to sample new podcasts without the extra hassle of managing feeds. When I dock the Zune with my host computer, the Zune software automatically adds the new content and removes the media I watched or listened to as well as updates any podcast feeds I have marked ‘unsubscribe’.

Using the squircle on the Zune 80

Speaking of the software, the Zune 2.0 software is good enough for syncing media to your device but falls short in a lot of areas. For one, it is resource intensive causing my machine to slow down considerably when using it. To be fair, my 4 year old computer doesn’t meet the recommended requirements but I still didn’t think the software would be a big resource hog. If you don’t use the official Zune 2.0 syncing software then you are out of luck as any third party software is locked out from managing the Zune hardware. I would prefer to use the excellent Media Monkey software for organizing and syncing my media but since the Zune uses proprietary drivers, there looks to be little anyone can do to break the tie with Microsoft.

Once you have your media set-up, the software isn’t that difficult. At first there were issues with duplicate podcast episodes showing up but as I made my way through the unplayed media, the issue sorted itself out. The Zune does a great job at staying synced with my computer. I just have to plug the Zune to the USB connector and off it goes with little intervention for me. I haven’t tried using the wireless syncing yet. In face I have turned the wireless capabilities off for the time being because I have never found another Zune device nearby and I would rather save the battery power than send out messages to my non-existent Zune neighbors. But one powerful feature about the wireless capabilities in the Zune has gone unnoticed. Wireless sync only works when the player is charging. Since I only have the included USB cable which connects to my computer, it doesn’t make sense for me to use wireless sync. But if I had a the Zune dock that connects to your TV than what I basically have is an Apple TV that I can carry in my pocket. Think about it. The Zune 80 will sync wirelessly with your computer and can output video to a standard definition TV at full resolution. Anything you can watch in your pocket, you can easily enjoy on a larger TV parked in front of a comfy couch. What’s not to love about that?

My biggest complaint about the Zune is there is no obvious comfortable way to hold it, especially when watching videos. The rectangular design is simple and makes great use of the space, but there is no place to put your hands. The best way I found to handle the Zune 80 is to rest the bottom corners in the web between your thumb and the index finger of both hands. Similar to holding a book.

This is the best way to hold a Zune 80

A must have accessory for the Zune is the leather case. Not only does it protect the player from outside abuse, but it gives you something to hold on to while watching videos. The squircle pokes through but the buttons are covered but usable through the brown leather case. A large flap goes over the device to protect the screen when not in use and is secured by a magnet. It’s easy to open and stays out of your way while using the Zune.

Microsoft Zune 80 with premium leather case

If Microsoft is listening, they really need an accessory that lets you control the device while it is tucked away in a backpack. Creative had a wired remote control that allowed you to play/pause, change tracks, and adjust the volume all by a little dongle that goes between your headphones and the player. This was a dream to have on morning commutes with my Zen in my backpack and the remote clipped to my shirt. A wireless version would be cool but dealing with a battery to keep it charged sounds like a big hassle.

After a month of using the Zune 80 and putting it through it’s paces, I am really happy with my purchase. Every morning I wake up with glee knowing that my commute will not be a dull, monotonous one-hour train ride thanks to my slick media player to keep me informed and entertained. If a digital media player is part of your daily life then you will know how important it is to compare what is on the market and find the best player for your needs. Apple vs. Microsoft politics aside, the Zune is a fantastic device that I could enthusiastically recommend to any media junkie I meet. Don’t let the trash talking sway you, as I truly believe the Zune 80 is the best portable media player out on the market right now.

Update: On January 8th, after writing the bulk of this review, my Zune suffered a software crash as I was walking home from work. The podcast that I was listening to suddenly stopped and the screen read “Could not play track”. Thinking it was a problem with just the MP3 file itself, I tried to play a song from my music library. When I selected play from an album view my player froze and became unresponsive to any button mashing I attempted. When I got in front of my computer I looked up the hard reset button combo which requires holding the back button and the top of the squircle. This Microsoft knowledge base article details everything you need to know. Upon reboot I was greeted with this lovely message, “To recover from an error, Zune must erase all content.” The only option was to hit “OK” by pressing the middle of the squircle. The media player would then reboot and this process continued forever in an endless loop.

After digging around on the net for a better solution, I decided my only course of action was to replace the firmware and completely wipe out my nearly 40GB collection. Following these arcane directions, I managed to get my Zune back to its factory default. It then took me all night to reload all of the songs from my library back onto my fresh Zune.

I suspect this crash was due to a hard drive glitch and I can’t really blame Microsoft for the fragile nature of hard drive based portable media players. Problems like this will eventually be a thing of the past once solid state flash memory, which has no moving parts, comes down in price. For now I thought it was important to add this addendum to the review of what problems can happen after normal use out in the wild.

No Browser For Surfing? Get Some Help

It’s hard to imagine being somewhere that locks down the web browser so much that you have to resort this nifty trick I read on, but desperate times call for desperate measures. If you can’t reach the web through Internet Explorer due settings beyond your control and forgot your portable Firefox thumbdrive then simply open up the calculator or MS Paint and click “Help”. From there go to “Help Topics,” which will bring up a help window. Now all that is left is to right click on the title bar and select “Jump To URL.” Type in any web address you like, but make sure to include “http://” at the beginning and you should be good to go.

Browse The Web In The Help Menu

What you are basically looking at is a stripped-down, basic version of Internet Explorer which is built into Windows and used to display CHM files, or Microsoft Compiled HTML Help files. Sure there are no niceties like bookmarks or your comfy, cozy Firefox extensions, but if you need to check your e-mail or Twitter account and this is your only resort, you will put up with a little cruft in order to get your stuff. Besides there are back and forward buttons, what else do you need in a browser?