Take a look at the two screen captures below.

Both are from the same parking services page. The first is in FireFox 3, the second is in IE 7. JavaScript is being used to change to HREF attribute of mailto links for @pcc.edu addresses. But, why is the inner HTML also changing when viewed in IE?

At first I thought it was a jQuery bug. Here is the code:
$(this).attr("href","http://www.pcc.edu/resources/web/forms/email/?to="+address);

But, after searching it turns out to be an IE bug.

If the text and url of a link match – then Internet Explorer decides to assign them both to the HREF attribute! So, if you alter the HREF then the text will also change… Here is an example:
<a href="http://www.google.com">google.com</a>  // fine - changing href will not change text
<a href="http://www.google.com">http://www.google.com</a> // bad - changing href will change the inner html text


Solutions

1) One answer is to keep the text different, but you may not be the only contributor to the site…

2) Another solution is to keep the HREF local:
$(this).attr("href","/resources/web/forms/email/?to="+address);

But, we have separate sub-domains and need all email to go to the www…

3) So, we are forced to store the inner html:
var linkHtml = $(this).html();
$(this).attr("href","http://www.pcc.edu/resources/web/forms/email/?to="+address).html(linkHtml);

Why am I still surprised by these IE bugs?

I gave a little talk at our monthly “All Developers Meeting” today. The topic was web optimization. Recently we setup http compression on our servers and I decided to take a look at how much bandwidth we save via all of our optimization/compression techniques. Using our academic programs page as a sample, I ran the numbers and found that we are saving from 1-6.5 terabytes annually. Here are my notes for the presentation:

No Optimization – Huge/bad/gross

No css or styles inline. Tables for layout. Scripts directly on page. Won’t even  bother showing an example.

Step 1. Separate code – 283 KB

Style is separated from content (separate .css). Behavior is separated from content (separate .js). Images are used wisely ( for instance 1px background image that repeats horizontally)

Step 2. Compress images, then compress again – 239 KB [44K less]

Choose the correct file type for each image (JPG for photos, PNG > GIF). Compress each image (using photoshop). PNG images can be compressed again (pngslim removes meta and shuffles bits – like defrag)

Step 3. Minify styles and scripts – 158 KB [81K less]

View compressed script library, or layout css. For Javascript we use JSMin (removes comments white space. Need well-formed code.) There are other algorithms like packer, but they requires non-trivial client-side processing time to uncompress the code. For CSS we use CSStidy ( removes white space., compresses colors, combines styles)

Step 4. Enable HTTP compression – 70 KB [88K less]

Note that this is our live version! Text is compressed by server and uncompressed by browser. Unsupported browsers will receive uncompressed version (wiki). Browser support: Internet Explorer (>= 4.0) FireFox (all) Netscape (>= 4.06) Opera (>=5.12) Images are not compressed further (doesn’t result in smaller size).
Minified files compress better then original.

Total Optimization

283 KB original
70 KB compressed
—————————
213 KB saved [That over a 2/3 savings]

And it adds up quickly!

Over the past year (Aug 4, 2007 – Aug 4. 2008) the site received:

• 32,550,230 Pageviews from
• 2,213,198 Absolute Unique Visitors

If 13KB was saved per pageview, then:

213 kilobytes * 32,550,230 pageviews = 6.5 terabytes of bandwidth saved

Or, with best-possible caching:

First page: 213 kilobytes * 2,213,198pages = 449.6 gigabytes
Subsequent pages: (32,550,230-2,213,198) pages * 20KB (html+images) = 578.6 gigabytes

So…

Between 1 and 6.5TB saved annually (not to mention the amount of time saved for our end-users)

Mozilla (the basis for the netscape, aol and firefox browsers) celebrates its 10th birthday today.

Ten years ago, Netscape announced it would release to the public the code of its flag ship product, Netscape Communicator 5, making it an open source product….

Over time, Mozilla would become the name of the open source project, AOL would buy Netscape and Internet Explorer would get up to 90%+ of market share leading to the worst period in web browsers’ history…

read more @ mozilla.org

Right now I am updating the style sheets that affect all 50,000 pages of PCC’s main website. With absolute certainty, I can say that all I want for x-mas is a standards complaint version of Internet Explorer…

(more…)