Home/ Questions/Q 6318289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T15:37:21+00:00

I’m starting to use TinyMCE in an existing project. Unfortunately the project uses a

  • 0

I’m starting to use TinyMCE in an existing project. Unfortunately the project uses a stylesheet which declares CSS rules for selector #content td, which was a bad decision by the designer. Theses rules are breaking the TinyMCE theme. However, the rules are applied very often in the project. Therefore, replacing them would be too much effort.

The #content td rules have higher priority because they are loaded before TinyMCE loads it’s CSS rules from javascript. If I was able to load TinyMCE CSS by using a <link> tag, I could solve the problem by loading the TinyMCE stylesheet before the project’s stylesheet.

  • Is the assumption correct?
  • Is there a way to manually load tinyMCE stylesheets via link-tag?
  • Do you have any other ideas?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Loading tinyMCE’s styles using a link tag vs. javascript won’t solve the problem, because the problem lies in CSS specificity.

    The rules of CSS state that the last valid rule with the highest specificity will take precedence.

    TinyMCE’s table rules are of the form .mceitemtable td, which has a specificity of 0,1,1.
    Your #content td rules begin with an ID, which has a specificity of 1,0,1.

    Therefore, the ID rules will always win over tinyMCE’s class-based rules, regardless of the order they’re loaded.

    See http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html for more detail about CSS specificity.

    (Aside: I didn’t think TinyMCE loaded its CSS via javascript anyway? The default behaviour for tinyMCE is to load the editor in an iframe, and inspecting said iframe shows that frame loads its own CSS via <link> tags.)

    • 0