Utilising the excellent 'Web Developer toolbar' for Firefox, I discovered that this issue is (often) caused by a CSS issue known as Box Border methods. Read background info here.

The fix is to insert these lines into the us.css for whichever tinymce skin you are utilising.

box-sizing: border-box
-moz-box-sizing: border-box;

It needs to be inserted into the primary class within the css file, typically:

.defaultSkin table, .defaultSkin tbody, .defaultSkin a, .defaultSkin img, .defaultSkin tr, .defaultSkin div, .defaultSkin td, .defaultSkin iframe, .defaultSkin span, .defaultSkin *, .defaultSkin .text

I don't know if there is a way for this to be incorporated as a fix within the Drupal TinyMCE module, so that the fix isn't deleted when TinyMCE is upgraded to a newer version?? I couldn't identify any CSS files with the module. But could one be inserted?

Trust someone will find this useful.

Comments

jbc’s picture

jbc commented

The background should have linked to here. And the CSS file referred to should have been ui.css (not us.css!).

This fix only seems to apply to TinyMCE v. 3.0; which has other incompatabilities with the current Drupal module, such as enable / disable editor setting.

microsite’s picture

microsite commented

i am having the same problem

i am very new to this .. would you please explain a bit further what i have to do to fix this problem, more detail perhaps..
in noob language ; )

thank you v much

jbc’s picture

jbc commented

Sorry, I can't tell you much more. Too be honest, I got so fed up with Tiny MCE being so difficult to configure, that I moved to utilising NicEdit

jbc’s picture

jbc commented

resolved by version update

jbc’s picture

jbc commented
Status: Active » Closed (fixed)

resolved by version update