Okay, this post is as much informative as it is a rant, so bear with me while I vent as I share.

Let's talk TinyMCE. Typically I use FCKEditor, but for my current project I'm going with TinyMCE. How hard can it be, right? An editor is an editor is an editor. I download it, I add the two simple lines needed to transform my textarea into a full blown editor, and voila: it's an editor. But the menu has NO icons to be seen! First impulse is that I obviously have a bad path for the images. But no, TinyMCE uses "embedded sprites" or something like that to display its icons, so it isn't a pathing issue. If I right click where an icon should be, I see it for a moment, but then it's gone again.

The symptoms

What it should look like

So I wade through dozens of google results that look like they *might* provide a clue. One is a thread on the TinyMCE forum where the symptoms are the same as mine. I read through the replies looking for that silver bullet, but the only clue I find is that the user eventually solved their problem by removing the div tag from around the textarea. Not a solution for me, because I kinda NEED my divs to provide structure to my layout (I thought we all did), but it does give me reason to believe that perhaps I have implemented some css that TinyMCE doesn't like. So I move my textarea to other parts of the layout and reload until I finally get the icons to show up. Aha! I've narrowed it down to the div area that causes the symptoms, <div id="inner">! So let's see what horrific css i've applied to that div that broke TinyMCE.

#inner {display:block;margin-left:-200px;margin-right:-210px;padding:5px;}

Well, it doesn't LOOk so horrible at first glance. Let me give that div a new ID and add a new line to my css, adding style elements until I see it break again. So now in my layout I have
<div id="innerr">
and in my css I have
#innerr {display:block;}

Reload. Okay, I see my icons. Add another element:
#innerr {display:block;margin-left:-200px;}

Reload. still see my icons. Add another:
#innerr {display:block;margin-left:-200px;margin-right:-210px;}

Reload. Wow, still see my icons. Surely it can't be the padding that's killing it! Let me add it:
#innerr {display:block;margin-left:-200px;margin-right:-210px;padding:5px;}

Reload.
I STILL see all the icons. I have just completely duplicated the style that was applied to div "inner", where my TinyMCE icons would NOT show themselves, and yet I now DO see the icons. Wait, let me try one more thing...

<div id="inner"> (rename the id back to the original value)

I rename my div ID back to "inner". It has the same exact style as "innerr". But my icons disappear again. WHAT THE HECK?

Obviously ID "inner" is reserved for TinyMCE in some way. Perhaps that was actually mentioned somewhere in the docs, but I didn't see it. So anyway, if you are using TinyMCE and experience surreal symptoms such as disappearing icons, step 1: change your div ID's and class names and see if the symptoms go away. It's likely some style or name you've used that stepped on TinyMCE's tiny little toes.