Forcing users to choose a browser other than Internet Explorer doesn’t help them

In the news this morning, I stumbled across an article, EU: 100 million Microsoft users to choose browser. Reading this, there were a few instances of questionable logic.

The first instance (emphasis added):

Microsoft is starting this month to send updates to Windows computers in Europe so that when computer users log on, they will see a pop-up screen asking them to pick one or more of 12 free Web browsers to download and install, including Microsoft.

Microsoft is allowing users to choose one of more than 12 free web browsers, because the EU didn’t like Microsoft bundling its own free web browser into Windows. Call me strange, but punishing a company to give something away for free because it blocks out other companies from giving their own products away for free strikes me as odd.

The second instance (emphasis added):

The EU’s executive commission said giving consumers the chance to try an alternative to Microsoft’s Internet Explorer browser that comes with the widely used Windows operating system would “bring more competition and innovation in this important area.”

Wait, didn’t we just read that there are “more than 12 free web browsers”? That doesn’t sound like lack of competition and innovation to me at all. How many industries offer a choice of over a dozen free items? None that I can think of.

web-browser-market-shareI am aware of Microsoft’s predatory practices in the web browser arena, particularly related to the browser wars between them and Netscape. Microsoft muscled out Netscape by giving away its browser for free, something Netscape didn’t do until early 1998. Isn’t that a good thing for consumers? Further, client software (such as Navigator) was a small portion of Netscape’s revenues, and at the time, “Netscape has successfully shifted its business over the past year toward enterprise software sales and to revenues from its Web site business, and away from standalone client revenues” (source: Mitchell’s Blog). If Netscape was successful in transitioning away from a client product, but ultimately failed in the enterprise marketplace, why is Microsoft being punished?

In the end, Microsoft was penalized for providing a product for free – and forcing the market leader to ultimately transform their business (“successfully”) and offer their own (similar) product for free. The fact is, Microsoft’s efforts were largely responsible for the explosion of free web browser alternatives – yet the EU still feels a need to punish them because there is “[not enough] competition and innovation in this area,” as they say.

Final point: let’s not mention the pain and suffering that novice users will have after installing other browsers, wondering where their bookmarks went, and wondering why they are being prompted to (re-)install Adobe Flash so they can play YouTube videos.

Some things are better left alone. This is one of them.

Live search’s extra spaces (only for Firefox, of course)

Go to http://www.asp.net and do a search to see a nifty AJAXy popup search results box, powered by Live Search and including some advertising (which I deliberately grayed out below). Look closely, and you’ll see the URLs in the search results (circled in red) have spaces where spaces just shouldn’t be. No surprise, this happens Firefox but not in Internet Explorer.

About the only thing missing is a "Best viewed with Internet Explorer" logo, circa 1998. This really inspires me to click the "Get my own Search Box!" for my site — I’d just love this bug to be reflected in my own work, too.

image

Improving TableKit’s sort performance in IE7

I noticed that TableKit‘s sort performance using IE7 grew progressively worse as tables grew in size (rows, not columns). I found the source of the problem and put in a simple fix to it. With the below change, sorting in IE7 is nearly as fast as in Firefox — that is, nearly instantaneous.

At line 322 (TableKit 1.2.1), comment the line as shown, and add the line noted.

        var tb = table.tBodies[0];
        var tkr = TableKit.Rows;
        rows.each(function(r,i) {
            tb.appendChild(r);
            //tkr.addStripeClass(table,r,i); /* THIS LINE COMMENTED */
        });
        TableKit.Rows.stripe(table); /* THIS LINE ADDED */

The change shouldn’t break anything as the new code added is standard TableKit code.

Capturing function keys in web browsers

I have a web application that allows the user to press the F2 key to bring up a modal box search window (the modal box script is provided by ModalBox). Today, one of the users came to me and said that every time they press the ‘Q’ key in the search box, the modal box refreshes.

It turned out that pressing the ‘Q’ key did in fact refresh the modal box — but only in Firefox, not in Internet Explorer. Knowing that Mozilla and IE have slightly different JavaScript event capture techniques, I looked at the code I was using to capture the F2 keypress.

Event.observe(window, 'load', function() {
	Event.observe(
		document, 'keypress', function(event)
		{
			if (event.keyCode) 
				keycode=event.keyCode;
			else
				keycode=event.which;
			if (keycode==113)
				Modalbox.show('Search', '/search/quicksearch.rails', {width:360, height:90});
		}
	);
});

A little research and I found the problem: keyCode 113 is the ASCII code for the lower-case ‘q’. I needed to find a way to capture the event when the function key 113 was pressed, not the ‘q’ key 113.

The solution was to use the event.charCode exposed in Firefox. This is undefined in IE, but in Firefox it equals zero when a function key is pressed. A little revision to the JavaScript code resulted in the following (note the difference in the line that contains (keycode==113).

Event.observe(window, 'load', function() {
	Event.observe(
		document, 'keypress', function(event)
		{
			if (event.keyCode) 
				keycode=event.keyCode;
			else
				keycode=event.which;
			if (keycode==113 && (event.charCode ? event.charCode : 0) == 0)
				Modalbox.show('Search', '/search/quicksearch.rails', {width:360, height:90});
		}
	);
});

Problem solved.

IE7 reverses table rows during Insertion.After

I found yet another interesting bug in IE7, related to using Prototype‘s Insertion.After command to insert additional table rows into an existing table. Apparently, IE7 will reverse the order of the table rows being inserted. As a proof of concept, I’ve set up an ie7 table insert bug test page to prove my point.

Here’s how to duplicate this bug.

  1. Create a new web page (we’ll call it test.htm).
  2. Create a <table> and add a few rows.
  3. Give one row a specific id (such as id="insertAfterThis").
  4. Create a separate web page (call it testdata.htm) with more table rows — just the <tr>...</tr>, nothing else.
  5. Add the following JavaScript to run after the window loads:
    new Ajax.Request('testdata.htm', { method:'get', onSuccess:function(transport) { new Insertion.After('insertAfterThis', transport.responseText); } });
  6. Load the test.htm page in Firefox, and see how the rows are inserted in the order they exist in the testdata.htm file.
  7. Load the test.htm page in IE, and see how the order of the rows is reversed.

It’s quite a frustrating bug, because there’s apparently only two ways to work around it:

  1. Figure out a way to add markup that forces IE to add the rows correctly.
    OR
  2. Have IE receive the table rows from your Ajax call in reverse order (so it’ll reverse it again into the correct order).

Considering we’re not even sure if #1 is possible, it’s a very frustrating bug. Some may say it’s a bug with the Prototype library, but I doubt it, since Prototype is simply inserting text — it has no idea there’s a table involved. IE7 reveals yet another illogical bug.

A wonderfully simple, wonderfully useful IE CSS hack

For the past few years, I’ve been doing a lot of web development. Part of my design mantra (at least from a code perspective) is table-less design using CSS that works in as many browsers as humanly possible.

Since Firefox‘s support for CSS standards is superior to that of IE, I generally code everything so it looks good in Firefox, then apply hacks to get it to work in IE. (Most other browsers require minimal tweaking once something works well in Firefox and IE.) At times, the hack is to add some IE-specific CSS code, which is usually done using the asterisk hack:

.myClass {
 background-color:white;
}
* html body .myclass {
 background-color:black;
}

Only IE recognizes the second line, so in IE, the background color of any element with the myClass class will be black; for all other browsers, it will be white.

However, this hack can be replaced by one I found today, which is beautifully simple and elegant: add an underscore before the CSS property name.

body {
 background: green; /* show to Mozilla/Safari/Opera */
 _background: red; /* show to IE */
}

It works in IE Windows only, according to the guy who wrote about it on his blog, Joen Asmussen. Hats off to you, Joen — a great solution not only in its simplicity (one extra character) and in its readability (you can visualize the IE-only hack in the same content as your non-IE CSS).

For more on CSS hacking with IE, check out Essentials of CSS Hacking For Internet Explorer by Marko Dugonjic. For more info on CSS standards support in modern browsers, check out Web Browser Standards Support by David Hammond.

IE in Firefox with the IE Tab extension

If you’re a Web developer or designer, you know the pains of testing Web sites with multiple browsers. My approach is typically to code against the standards, then check to make sure it looks good in Firefox, then check to make sure it looks good in Internet Explorer. It’s that third step which is a bear, because with every change you make to try to get something to work in IE, you need to check and make sure it didn’t break anything in Firefox. Needless to say, that’s a lot of time spent ALT-TABbing.

I stumbled across a Firefox extension that makes this job easier. IE Tab allows you to have a Firefox browser tab that uses the IE rendering engine — quite literally, Internet Explorer in Firefox. It works flawlessly, and makes one less window to manage on my desktop. Even better, it will ensure that certain WEb sites (like Windows Update) will always use the IE rendering engine — perfect for easy handling of those IE-only sites out there. A highly recommended extension to Firefox!

One less reason to use IE: Opera is now free!

As reported on Slashdot, the Opera Web browser is now free of licensing fees or advertisements. (You can still pay for premium support.) You don’t even have to provide an email address or name to download it.

Oh, and there’s versions for Windows, Mac OS, Linux, FreeBSD, Solaris, OS/2, QNX, and for dozens of different mobile devices. All free. Wow!

Three reasons to use Firefox

The Firefox web browser, part of the Mozilla project, became my standard Web browser some weeks back, replacing Microsoft’s Internet Explorer. There’s a lot of reasons to use Firefox instead of IE: Firefox is more secure, takes up less system resources, is independent of the rest of the operating system, has a tabbed interface, and more.

The biggest reason to use Firefox is for its extensions. Extensions are “small add-ons that add new functionality to Firefox”. Here’s three extensions that any tech-savvy person can not do without.

  • Web Developer. This is the single greatest thing for Web developers since the birth of the markup language. Web Developer adds a toolbar to Firefox that allows you to do dozens of tasks: edit a page’s CSS, auto-complete form fields and expose password fields, convert between GET/POST requests, display image ALT, size, and dimensions (or hide them altogether), view cookie and header info, display HTML block, ID, CLASS, and link properties, clear cache/cookies/authentication, outline block elements, resize your Web browser window, link the current page to the W3’s HTML and CSS validators, and more… If you are a Web developer, this extension will increase your productivity. If it doesn’t, you’re not a good Web developer.
  • WebmailCompose. I use GMail for e-mail. Unfortunately, the typical mailto: link in a Web page tries to open the operating system’s e-mail program. WebmailCompose fixes that by trapping mailto: links and redirecting them to any of a wide number of WebMail services, including GMail, Yahoo! Mail, Hotmail, and any other that you use. You can even code your own string to work with your own Web-based email client.
  • PasteIP. Whereas Web Developer is incredibly complex, this is incredibly simple, but for those times when you need it, it’s invaluable. Need to paste your IP address somewhere? Just right-click and “Paste IP Address.” No more trips to the command prompt or to whatismyipaddress.com.

There’s plenty of other useful extensions available, and some not-so-useful – just take a look and find what works for you.