TinyMCE is changing my inline CSS

Question

I input this in the HTML editor:

<p style="border:1px solid #edede4;border-top:none"></p>

I click update, and click the html editor again. The HTML (in Firefox) has changed to:

<p style="border-style: none solid solid; border-color: -moz-use-text-color rgb(237, 237, 228) rgb(237, 237, 228); border-width: medium 1px 1px;" mce_style="border:1px solid #edede4;border-top:none"><br></p>

If I do the same thing in Internet Explorer, the HTML changes to:

<P style="BORDER-RIGHT: #edede4 1px solid; BORDER-TOP: medium none; BORDER-LEFT: #edede4 1px solid; BORDER-BOTTOM: #edede4 1px solid" mce_style="border:1px solid #edede4;border-top:none">&nbsp;</P>

Why in the world does it change? Maybe there are some TinyMCE settings i can change? But I already have cleanup: false. Ideas?

If I enable cleanup, the change I'm mentioning doesn't happen. However, TinyMCE changes a lot of other stuff. I don't want it to mess with my code :( Any help would be appreciated.

Answer 1

Try setting verify_html to false.

Doc: TinyMCE Configuration/verify_html

Answer 2

When I have too many trouble with TinyMCE I just try to create other alternatives. The "correct" way is to create a class in you css.

Instead of:

<p style="border:1px solid #edede4;border-top:none"></p>

Use:

<p class="p_border"></p>

And declare in your css:

.p_border {
    border:1px solid #edede4;
    border-top:none;
}

Unfortunaly, you're doing a newsletter so you need inline. I haven't tested creating "style" tags before each "p" in this scenario with the class I declared above. You could try to see if it works.

If it doesn't work, I would try to use "inline_styles : true".