IE compatibility (again!)

I have just installed the Tiger administration plugin for WordPress. It’s quite nice. But the one thing that annoys me about it is that it doesn’t support Internet Explorer. If you have IE, it will revert to the old ugly admin style. Lack of IE support is very common in the open source arena. The usual excuse is that IE should be standards compliant and if it was then developers wouldn’t need to spend extra time making sure their sites work with it. But in reality I believe it’s an idelogical thing. WordPress itself tells me I am an idiot for using IE, with a link to a web site trying to present the virtues of Opera, Safari and Firefox. It’s actually very annoying.But Internet Explorer is a standard. Just like Windows and Office are standards. IE is not sanctioned by any official body, but it’s still the most used browser. As long as it has a significant market share, it seems stupid not to spend the time making sure your web sites work with it.Now, in the Tiger admin plugin’s case, the whole theme is based on CSS2, which IE doesn’t appear to support. There wasn’t a conscious decision to disable IE support, it just so happens that the stylesheet won’t be recognised by IE. Clever way to do it, but I’d like to be able to use this theme in my normal browser. So I might play around with it to get it to work, or I might just find one that does work. 

IE compatability issues with WordPress

There are a few problems with WordPress when working with IE. They’re kind of annoying, so I will look at fixing them when I can be bothered.

One I noticed today occurred when I wanted to create a link using the keyboard shortcut Ctrl+K after selecting text:

TinyMCE error IE7

It looks like it fails at this point (starting at line 28 of link.js):

// WordPress -- next 3 lines
document.forms[0].href.value = tinyMCE.getWindowArg('href') || 'http://';
document.forms[0].href.select();
document.forms[0].href.focus();

Let’s try this again. What is document.forms[0].href under IE7? It’s an <input /> tag. It’s the field that accepts the URL of the linked-to page. Let’s see whether it’s invisible or not enabled. <input /> tags definitely do accept the focus. The tag itself is visible and enabled, so it must be one of its parents. I guess the simple solution is to find the part in link.js that makes it visible, and put this .focus() call after it.

OK, it’s not as simple as that, because the code that makes the popup visible is called from an event handler. The onLoad() function in tiny_mce_popup.js, to be precise. It’s part of the TinyMCE_Popup class. I guess in IE7 the load event is called later than in Firefox? Right, well, it turns out it’s document.body that has display: none.

(I just checked in Firefox and there is no error at all. That’s good news.)

Ok, before the aforementioned line I added:

document.body.style.display = '';

Let’s see what happens. No error message! But the focus is not set. So it really has the effect of not setting the focus at all. But let’s think a minute. We want there to be focus whenever the insert link form is loaded. So why not put the set focus code in that load event? Actually, I think it is already being called from there, and it’s not working.

Never mind. I have fixed the problem I came to fix. I will fix the other problem another day.

One problem I have is that you can’t use the <code> tag without going into HTML mode. Must fix that.