TinyMCE - buggy / unusable in IE8

Question

I am using jQuery version for TinyMCE 3.3.9.3

It works fine in firefox (10 second video showing it in use): http://www.youtube.com/watch?v=TrAE0igfT3I

In IE8 (in IE8 standards mode) I cannot type or press any buttons. However, if I use ctrl + v to insert, then I can start typing, but the buttons still do not work (45 second image depicting it in use): http://www.youtube.com/watch?v=iBSRlE8D8F4

TinyMCE JQuery demo on TinyMCE website works for me in IE8.

Here's the initialization code:

$().ready(function(){

    function tinymce_focus(){
        $('.defaultSkin table.mceLayout').css({'border-color' : '#6478D7'});
        $('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#6478D7'});
        $('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#6478D7'});
    }

    function tinymce_blur(){
        $('.defaultSkin table.mceLayout').css({'border-color' : '#93a6e1'});
        $('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#93a6e1'});
        $('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#93a6e1'});
    }


    $('textarea.tinymce').tinymce({
        script_url : 'JS/tinymce/tiny_mce.js',
        theme : "advanced",
        mode : "exact",
        invalid_elements : "b,i,iframe,font,input,textarea,select,button,form,fieldset,legend,script,noscript,object,embed,table,img,a,h1,h2,h3,h4,h5,h6",

        //theme options 
        theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,|,undo,redo,|,cleanup,removeformat,|", 
        theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,forecolor,backcolor,|", 
        theme_advanced_buttons3 : "", 
        theme_advanced_buttons4 : "", 
        theme_advanced_toolbar_location : "top", 
        theme_advanced_toolbar_align : "left", 
        theme_advanced_statusbar_location : "none", 
        theme_advanced_resizing : false,

        //plugins
        plugins : "inlinepopups,paste",
        dialog_type : "modal",
        paste_auto_cleanup_on_paste : true,

        setup: function(ed){
            ed.onInit.add(function(ed){

                //check for addEventListener -- primarily supported by firefox only
                var edDoc = ed.getDoc();
                if ("addEventListener" in edDoc){
                    edDoc.addEventListener("focus", function(){
                        tinymce_focus();
                    }, false);

                    edDoc.addEventListener("blur", function(){
                        tinymce_blur();
                    }, false);
                }

            });
        }

    });


});

Any ideas as to why it doesn't work in IE8?

[edit]: removing everything from init (leaving only script_url and the theme) leads to the same symptoms

Answer 1

, , tinymce 3.4.4.

, fieldset : relative z-index: -1. z-index tinymce.

Answer 2

tinymce html. Eigther "" " ", tinymce.execCommand('mceAddControl',true, element_id);*

Answer 3

, # URL, . , - . , URL- URL-, , . , .

Answer 4

maybe it would be too late I ran into the same problem. in ie9 and ie7 everything is fine, but in ie8 cannot type or press buttons

there was a "noscrpipt" tag on the page with built-in styles (I know there is an error with ie8 and background style in noscript btw)

and the solution was to remove the inline style in the noscript tag (or the tag itself), and tinymce started working fine