I was getting very small text and a the bg-body.png showing up in the background of the TinyMCE editor window.

http://img.skitch.com/20090616-cju41fsfm4fwiac5kfd717ruwm.jpg

I added the following css to fix the issue:


html, body .mceContentBody {
	font-size: 1.25em;
	background: #FFFFFF;
}

Comments

agerson’s picture

agerson commented

PS, Screen shot only shows background image, text size fix already applied in that shot.

agerson’s picture

agerson commented

hmmm, that appears to have had other negative side effects. The problem stems from the fact that tinymce includes an iframe with a full html and body that is inheriting the background: #355671 url('../images/bg-header.png') repeat-x bottom left; Investigating...

agerson’s picture

agerson commented
Status: Needs review » Active
jacine’s picture

jacine
she/her
Location New York
commented

Hey, do you have this on a demo site where I can try debugging with Firebug? I really, really don't want to install TinyMCE.

Thanks :)

aimutch’s picture

aimutch commented

I'm not seeing the background image but I am seeing the small text. Here's the relevant code:


<tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="edit-body_ifr" frameborder="0" src="javascript:""" style="width: 100%; height: 233px;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
</head>
<body id="tinymce" class="mceContentBody" spellcheck="false" dir="ltr">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra lacus sit amet libero euismod vel ornare tellus commodo. Etiam volutpat semper eros quis dignissim. Suspendisse potenti. Cras sed tristique magna. Nunc ac venenatis erat. Morbi porttitor auctor ante. Nunc sed mattis libero. Vivamus nisl felis, sodales vel adipiscing ut, egestas nec dui. Etiam semper nibh eu libero eleifend eu ullamcorper est tempor. Curabitur sit amet sodales ligula. Etiam hendrerit nunc ut turpis eleifend dignissim.
</p>
</body>
</html>
</iframe>
</td>
</tr>

and the related code from Firebug:


Inherited from html
html, body {style.css?B (line 12)
font-size:0.625em;
line-height:1.6;
}

The fix will require creating TinyMCE specific styles that will work within the iframe.

aimutch’s picture

aimutch commented

Shouldn't the line-height have a size attribute associated with it like px or em?

agerson’s picture

agerson commented

Yes, will email you login info

jacine’s picture

jacine
she/her
Location New York
commented

aimutch, it actually doesn't need units it for line height ;)

agerson, maybe you should try this:

iframe body .mceContentBody {
font-size: 1.25em;
background: #FFFFFF;
}
agerson’s picture

agerson commented

the body tag now works, but there is still some background showing through. In firebug if I disable to background for html tag inside the iframe it looks perfect. We need to additionally apply background-image: none; or background: #ffffff to the html tag inside the iframe id="edit-body_ifr" frameborder="0" style="width: 100%; height: 258px; I tried 

iframe html .mceContentBody {
background: #FFFFFF;
background-image: none;
}

that didnt work.

agerson’s picture

agerson commented

is there anything wrong with changing style.css from

html, body {
  background: #314C74 url('images/bg-body.png') repeat-x left top;
  font-size: 0.625em; /* Don't modify the font size here */
  line-height: 1.6;
}
body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  color: #111;
  /* change the font-size in #wrapper */
}

to 

html, body {
  font-size: 0.625em; /* Don't modify the font size here */
  line-height: 1.6;
}
body {
  background: #314C74 url('images/bg-body.png') repeat-x left top;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  color: #111;
  /* change the font-size in #wrapper */
}

or even getting rid of the html selector altogether?

aimutch’s picture

aimutch commented

There's a body tag within the iframe so moving the background image into the body section may not fix this.

agerson’s picture

agerson commented
Status: Active » Needs review

The body tag inside the iframe has a selector "mceContentBody" which can be overridden with 

body.mceContentBody{
  background: #fff;
  font-size: 1.25em;
}

This solution + #10 fixed the problem for me.

aimutch’s picture

aimutch commented

Which browser are you seeing this behavior on? Just curious since I couldn't replicate the background problem.

jacine’s picture

jacine
she/her
Location New York
commented

If I remember correctly, the background needed to be applied to both html & body because of the sticky footer & Opera. Not sure though, it was a long time ago. I just tried and it appears to be okay in Opera, so what if you leave body.mceContentBody alone, and instead of #10 try:

body {
  background: #314C74 url('images/bg-body.png') repeat-x left top;
  font-size: 12px; /* Don't modify the font size here */
  line-height: 1.6;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  color: #111;
}

Let me know how that works out.

jacine’s picture

jacine
she/her
Location New York
commented
Status: Needs review » Fixed

agerson, I tried the fix I posted on your site and it appeared to work, so I committed it. I had to remove the code you had in your custom stylesheet though. Let me know how it works for you.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.