Things that should work in IE that don’t…

For the first version of TextJs I “forgot” about Internet Explorer. I didn’t have a machine to easily test it on, and just wanted to get something out there to see whether the idea is worthwhile. I quickly soon got a complaint about this, so thought with the latest version I should fix that. I installed Windows 7 onto (into?) a virtual machine, here is what I got:

Le sigh. I’m quite surprised that the Javascript works fine, but I’m using Backbone and jQuery for practically everything rather than rolling it myself, so that is probably why. The CSS though is a different story… I am also rather surprised about that as I thought Internet Explorer 8 was supposed to do a half decent job, I guess not. Below is what I discovered.

“IE doesn’t believe in HTML 5 elements”

Some of the CSS selectors applied to header tags, which IE doesn’t know about. As such it just ignores them. Adding the Javascript from html5 doctor solves that. This fixed the message date and hover-menu styling.

Menu Highlighting

This was actually my own fault rather than IE’s. I used the Ultimate CSS Gradient Generator to generate the code for the gradients, and for certain elements wanted to override it. This was easy, I just needed background: none (e.g. to remove it). However I missed that it also generated IE specific filter code. I also needed filter: none. Next…

Menu Dates

Unlike the message dates, the menu dates weren’t fixed with the teaching-IE-about-HTML5 Javascript file. Again the CSS rules being ignored were on header tags, however for some reason these were still being ignored. I couldn’t figure this one out, so I just moved the rules to other tags. Meh.

Box Shadow

CSS3 Generator, which I used for the other CSS3 effects didn’t supply a filter tag for the box shadow which IE supports, so this needed to be added:

background: #fff;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#d0d0d0', Direction=135, Strength=3);

The background needs to be set, as unlike the CSS3 box shadow this also applies to any text on a transparent background. It also doesn’t support short hex colour codes, so #d0d0d0 rather than #ddd needs to be specified as the colour.

Border Radius

IE (below 9) doesn’t support border radius without some nasty hacks, either from Javascript or HTC files. I’m not that fussed about them so I’ll give that a miss.

Keyboard Shortcuts

For keyboard shortcuts I used Thomas Fuchs’ most excellent Keymaster. This is great and works cross browser no problems. The only issue is that most of the keyboard shortcuts I have in TextJs default to a browser function. I solved this in most cases (it doesn’t work for Cmd-N on Chrome >_<) by calling the jQuery function preventDefault on the event. This however doesn’t work in IE.

Apparently this is the incorrect way to stop an event from firing the default action, however the solution is easy. Just return false from the event handler. I didn’t know about this before, and there are a few caveats (pointed out in the article), but for my use case this seems fine. It still doesn’t solve the Chrome issue though :-/

Console

I had a few mischievous console.log’s left in place which caused a few Javascript errors. That is fixed with this nifty line of Javascript:

if (typeof console == "undefined" || typeof console.log == "undefined") var console = { log: function() {} };
</pre>
<p>  
I decided to add this rather than removing them as I&#8217;m sure more will appear later, so I would rather be safe than sorry.</p>


**Roundup**  
And there we go, let&#8217;s hope IE 9 is better. The fonts still look rubbish, but that is just Windows. For comparison this is what it looks like on Chrome on OS X. Aaahhh.


[<img src="http://wp.local/wp-content/uploads/2011/09/Screen-Shot-2011-09-25-at-16.24.14.png" alt="" title="Screen Shot 2011-09-25 at 16.24.14" style="width: 550px" />][10]