Hi All,
I'm trying to add editor styles to TinyMCE on 2.2 (seems to be a problem on 2.1 as well), the general styles are pulled in, but <body> background colours and images specifically do not work. Firebug-ing it, it looks like the <body> of the editor content area is set to the height (roughly) of the editor iframe. See screenshot attached for visual. The problem being is that I want the editor to have a background colour regardless of how tall the content is for any particular page.
I only seem to be able to force the height of the content area by giving it a specific height/min-height. Auto height, etc, doesn't work at all.
body#tinymce { min-height: 1400px; }
Removing this from the editor styles leaves the <body> in the editor collapsing as if the elements inside are all floated. I also tried forcing a "clearfix" (as per HTML5 boilerplate) on the <body>:
body#tinymce:before, body#tinymce:after { content: ""; display: table; }
body#tinymce:after { clear: both; }
body#tinymce { zoom: 1; }
But that makes no difference either.
The only thing I've been able to get working reasonably so far is to do the following:
#ta_ifr, #ta_ifr > html, body, #container, article, #main-contain, #main, html body.mceForceColors { background: #D4CEC8 !important; background-image: none !important; overflow: auto; }
The overflow: auto causes the issue of two scrollbars (seen in the second screenshot), but does allow the background: to completely cover the content area. This has the other problem that to turn scrolling off properly on an iframe it needs scrolling="no" adding to the source - not something I want to be messing with really.
Is this an actual bug or is it supposed to do that? Is there an obvious, simple fix for this that I've overlooked?
Any help much appreciated!
