IE8 has a right table border problem on JavaScript-inserted cells

If you use collapsed table borders on with IE8 and insert or delete cells in the table with JavaScript, the right border will be missing. For example, when you insert a row in a table this CSS ...

.fmtTable { border-collapse: collapse; width: 100%; border: 1px solid #D0BFAB; }

... with the following jQuery code ...

$("<tr><td colspan='2'>Test</td></tr").insertBefore("table.fmtTable tr:last");

... the right border will disapper.

Fix: declare an extra class last ...

table.fmtTable .last { border-right: 1px solid #D0BFAB; }

... and apply it to every last cell in the table:

$("table.fmtTable tr").find("td:last").addClass("last");

Another XSLT-related bug in IE

I’ve created an RSS feed that points to various web pages that use client-side XSLT (read this article if you’re not familiar with the architecture of my web sites). The feed is accessible through FeedBurner which modifies the feed slightly to track clicks:

• All the links in the feed are modified to point to FeedBurner URLs
• The FeedBurner URLs encode the actual click destination (this allows FeedBurner to count the clicks)
• FeedBurner uses “301 Moved Permanently” status code to redirect the user to the target web page.

When the target web page is an XML document with xml-stylesheet directive, Firefox and Chrome display it correctly, but IE 8 crashes, as it interprets the XSLT stylesheet address relative to the “old” location (FeedBurner), not the redirected location.

I could fix this problem by hard-coding absolute XSLT URL in the XML document, but then some browser might consider that a potential CSS attack, causing further problems. For the moment, IE 8 has proven to be closer to Firefox and its XSLT woes that I thought.

OMG, more browsers are coming

The EU commission has reached an interesting agreement with Microsoft: Microsoft will present European users with a choice screen allowing them to select one of many browsers as their default browser. In principle, this is a great idea, if they could decide to offer users three or four browsers; very probably the users will have 10+ choices.

While this is supposedly good for users (and excellent for niche browser vendors), increased market share of currently irrelevant browsers might spell trouble for web developers using non-mainstream technologies (my favorite example: client-side XSLT transformation). For example, the percentage of users not using Firefox, IE or Chrome (yes, in that order) on one of my web sites is well below 5%, so I don’t care too much whether every little details works as it should. The situation would change drastically if they “minor” browsers would represent 20% of my users.

Custom data in HTML5 tags

Quite often I’d like to add application data to my HTML markup to pass information between server-side scripts generating the HTML markup and client-side jQuery scripts. Prior to HTML5 you could decide to use XHTML and your private namespace; numerous applications (including Facebook and my web sites) use this approach. It works nicely unless you’ve decided to use client-side XSLT transformation in Firefox.

HTML5 gives you another option: embedding custom non-visible data in HTML tags. You can add as many attributes as you wish to a HTML tag as long as they start with the data- prefix. HTML5 compliant browsers will eventually give you DOM access to these attributes through the dataset attribute; in most browsers (ancient IE or Netscape releases might not work) you can get these attributes with the getAttribute (or jQuery attr) call.

You might wonder what the difference is between using non-standard attributes of your choice and standard data- attributes as long as the browsers don’t support the dataset property. If nothing else, your HTML code will be validated by HTML5 validator.

Find Facebook Friends with Your Facebook Connect Application

InformIT.com has just published the last article in my Facebook Connect series. This uses the common task of finding the Facebook friends of your Facebook Connect user to explain the intricacies of FQL (Facebook Query Language).