IE - why oh why do you taunt me so??

I’ve been working on a couple of plugins for the YUI editor to allow insertion of Flash Movies (YouTube and Google Video). It’s all working swimmingly well in Firefox and Safari but in IE - it just would not work. Why? because of IE’s JS engine bastarding implementation of innerHTML and pasteHTML. I know that innerHTML is not part of the ECMA spec but it is well supported across browsers and is alot quicker than document.createElement. The YUI editor uses it extensively too. I’ve also never encountered problems with it before.

My JS plugin for the editor takes and parses a Google Video URL and inserts it into the editor content area using the appropriate YUI editor action “inserthtml”. In Firefox - I get the alternate image as it doesn’t render the markup in the editor’s iframe properly and as such does not know to load the Flash plugin (this is fine and I have no problems with it). Internet Explorer inserts the HTML and then displays a broken flashmovie icon (white with red x in top left indicating it can’t find the movie specified), which is not fine. This is the markup I insert.

Correct markup

IE (6 and 7), in all it’s wisdom decides that that is not what I really want to insert -in fact what I really want is -

Incorrect markup

Hmmmmm….. No that’s not what I fucking well want - you piece of shit(or so I was shouting late last night). This is due to the JS engine’s HTML normalization - excuse me what?????. Very annoying. To get the editor to display the movie I had to (”shock horror”) add the deprecated embed element.

Another problem was that when submitted server side - we use a HTML parser and IE’s version of the markup would not parse correctly as the attribute values were not quoted. So I have one momma of a regex to fix the object element.It all works now and works well but it’s so disappointing that it happens like this.

In summary - firstly: beware of innerHTML especially when inserting an object element and finally: I hate internet explorer more than I ever did.

5 Comments

  1. Posted October 18, 2007 at 1:34 pm | Permalink

    Ahh, IE. The fun never ends with that browser.

    I figured out why my website is utterly shafted in IE6 the other day too. It’s because IE6 gets to the counter attribute and stops parsing the rest of the CSS file.

    ol.comment > li:before {
    content: counters(item, “.”); counter-increment: item 1;
    margin-right : .25em;
    font-size : 1.9em; }

    There’s the trouble. Valid CSS.

  2. Posted November 9, 2007 at 12:05 pm | Permalink

    IE consistently makes me lose time. I really should have set up a special time sheet for tracking when I start work on a weird IE issue and when I finally work out the solution.

    Keep track of it for a few months and then send a bill to Microsoft.

  3. Thy Sok
    Posted January 3, 2008 at 7:00 am | Permalink

    Would you mind sharing the code you have working to include youtube videos into yahoo editor? Thanks in advance and Happy New Year. -Thy

  4. Posted April 16, 2008 at 9:48 am | Permalink

    Aargh! Can you believe it Phil, I just spent the last day and a half trying to find the root cause of why youtube vids wont upload into YUI editor from IE, tracked it down eventually to one line of code in the editor-beta-debug.js (PasteHTML), decided to google for a solution, and found this your bloody post in the first three results!!! :-) :-) No it bloody doesnt work well :-) And I cant see at the moment how to fix it.

  5. Posted April 17, 2008 at 3:45 pm | Permalink

    Sorry Phil, you had fixed it, just someone else wrote something else that didnt use your fix. For anyone wondering how to fix this problem, use regexs and replace on the server side.

    Frank

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*