CKEditor UI not visible in IE7 when the cache is empty and placed in table-layout:fixed

[Saurabh]

I am using CKEditor in my Asp.Net MVC application, It works fine on all other browsers, but in IE7 editor is not showing.

any Ideas? Kind Regards, Saurabh

[Saurabh]

Editor in Firefox seems fine.

[Saurabh]

editor in IE7 nothing is displaying

[Tobiasz Cudnik]

Can you confirm this with newest trunk from SVN repository ? ? We're about to release a new version which is well tested in all browser (and definitely works in IE7).

Can you also please try to narrow down reproduction code ? Your page may contain scrollbars, or other elements with interfere with the editor. We would like to know what are those elements.

[Tobiasz Cudnik]

Here's the nightly you can check:
​http://download.cksource.com/CKEditor/CKEditor/Nightly%20Build/ckeditor_nightly.zip

[Saurabh]

Now I am using code from ckeditor nightly

​http://download.cksource.com/CKEditor/CKEditor/Nightly%20Build/ckeditor_nightly.zip

still not worked with IE7.

Yes my page contains scrollbars, but no other elements are interfering it. I have the Textarea and I have to save the text in that textarea and I am some javascript on that textarea thats it. Why it is not working with IE7 ? Do we need to changes with patches??

Kind Regards, Saurabh

[Frederico Caldeira Knabben]

Please attach a sample page to this ticket, so we can reproduce the problem here. It's working in our test pages, and we need to investigate why we have problems with your specific case. Thanks.

[Alfonso Martínez de Lizarrondo]

Expired

[Erik Kangas]

I have had this same issue with the released CKEditor v3.0 code. Here are more details:

• Only affects IE (testing with IE7 on Win Vista)
• Does not affect Opera or FF
• Only seems to happen when the editor is being loaded in a DIV or textarea inside a TD that is in a table with the style "table-layout:fixed"

To Make it happen:

• Have a page where the CKEditor uses CKEDITOR.replace in the page onLoad.
• In IE, clear your temporary internet files ... so there is nothing cached at all
• Refresh the page with the CKEditor on it.

Result:

• Like in the example JPG.
• setData immediately after the replace will enter the content and you can edit the content -- however, all of the "chrome" of CKEditor is still invisible.
• After some editing, the chrome may suddenly re-appear in full glory
• The issues does not re-appear until the cache is completely cleared again.
• Once the CKEditor has been cached, the issue doesn't happen. Maybe some race condition in loading?
• If you change the page width so that the size of the CKEditor changes, it redraws itself and then is fine.

Once again:

• Removing the style "table-layout:fixed" from the enclosing table also resolves the issue completely.

For example

<table style="table-layout:fixed"> <tr>

<td width=25%> Lorem ipsum! </td> <td width=75%>

<textarea name=editme id=editme></textarea>

</td></tr>

</table>

That should show the issue, if you replace the editme with a CKEditor.

[Erik Kangas]

More details:

• If the element being replaced as the id "content", then the new CKEditor will be in a span with the ID "cke_content". So, if you look at this span object in an "instanceReady" callback, its computed Height is zero in IE when the problem occurs. The computed height is normal in other browsers and in IE after the problem goes away. There is apparently some issue with this enclosing span.

• As anything that forces the browser to re-render the page fixes the issue, I have a work around. For IE, add an instanceReady callback. This callback will check the computed height of the "cke_..." span. If that is "0", then change the display style of that span to "none" and then back to "block". This forces the re-rendering of this area of the page only if it is not showing the span correctly.

CKEDITOR.on('instanceReady', function(e) {

for (var n in CKEDITOR.instances) {

var e = xGetElementById('cke_' + n); if (xHeight(e) == 0) {

e.style.display='none'; e.style.display='block'; }

}

});

Here, I am using the ​http://cross-browser.com library for xGetElementById and xHeight

function xGetElementById(e) {

if(typeof(e)=='string') {

if(document.getElementById) e=document.getElementById(e); else if(document.all) e=document.all[e]; else e=null;

} return e;

}

and

​http://cross-browser.com/x/lib/view.php?s=xHeight

This resolves the problem for me while we await a resolution to the underlying issue.

[Frederico Caldeira Knabben]

Targeting it to the 3.2 for investigation.

[Garry Yao]

The attached sample page WFM in trunk with IE7/IE8Compat, am I missing any necessary conditions?

[Garry Yao]

Feel free to reopen the ticket on any new findings.