Hello,
Im trying to create a simple table with certain regions that can be edited using the inline version of CKeditor. Firefox seems to render the page differently when I add a div with contenteditable="true" in the areas I want to be editable.
Here is an example:
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#CC0000">
<tr>
<td width="15"></td>
<td height="75" align="left" valign="middle" style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; text-transform:uppercase; color:ghostwhite; font-size:36px;">
<div contenteditable="true">
Tasty Treats
</div>
</td>
<td width="15"></td>
</tr>
</table>
Notice the difference between the output in firefox with and without contenteditable="true".
Any solutions to this problem?
Thank you in advance.
I see what is doing it, but I
I see what is doing it, but I don't know how to fix it yet. I have seen a similar effect in the div:hover effect that I have tried to place a border around the contenteditable areas. It adds some extra margin of sorts to the top and displaces everything downward.
The additional margin space appears to come from the <p> tags that CKE inserts into the DOM to wrap the "Tasty Treats" text. You can see the same rendering issue when you simple change "Tasty Treats" to "<p>Tasty Treats</p>" in your sample above and delete the contenteditable="true" attribute. There you will get the same strange margin.
I noticed this using firebug to roll over the DOM elements and see which ones occupy which regions of the screen when I noticed thaat the <p> tags occupy space that is outside the div that contains them - that's odd! Might just be a browser bug...
Note: It might not even be CKE. It could be related to this discussion of strange, hacky behavior in FF.
Here's a fix, see if it meets
Here's a fix, see if it meets with your needs: