tinymce icons in internet explorer

Question

I'm using TinyMCE but the images for the icons don't show up in Internet Explorer. I've checked the discussion here, but I'm already doing the necessary code right.

In firebug when I'm using firefox, I can check the CSS and I do see that the image (img/icons.gif) is loading, so it must be loading in IE as well, but the toolbar is still blank. If I roll over the toolbar, I get the right tooltips and can figure out which button it is, which means the buttons in the advacned are working. I think the problem is in CSS.

I'm using the latest jQuery version of TinyMCE, and running IE9. When I try it in compatibility view of IE9, it does show up the icons.

Is there any specific CSS that needs to be tweaked for IE9?

Answer 1

In my case the reason was the blocking of download of fonts in the IE-Security-Settings. (IE -> Internet Options -> tab 'security' ) Here the screenshot of the settings in a German IE:

If you cannot change the security settings, You can find a proposal here in TinyMce UserGroup to use a skin that does not use fonts. You can download the skin 'lightgraynofonts' here. Extract the zip-file into a directory /tinymce/skins/lightgraynofonts and initialize the tinymce editor like this:

                tinyMCE.init({
                            selector: ideditor,
                            theme: "modern",
                            skin: "lightgraynofonts",** ...

Answer 2

Are you using a responsive layout? If so, try this:

.mceEditor img {
 max-width: none;
}