webpage css overrides ckeditor 3 style

Question

I've got a page where I load screen.css which contains an evil rule, which for various reasons I cannot remove or modify:

a {
    background: red !important;
}

I use CKEditor 3.x on the same page and the problem is that, no matter which style I choose (v2, kama, office2003), the buttons of the editor look red.

FCKeditor 2.x didn't have an issue with this because it was creating an iframe to host the whole editor instance. Thus the evil css snippet didn't even exist in its page.

The new CKEditor 3.x though uses divs and tables to host the editor wrapper and buttons and then an iframe just for the rich textarea content.

Any solutions for this?

thanks

Answer 1

Ah, fun.

Specificity to the rescue.

Create a new stylesheet that overrides that a { color: red !important} }. Make it something that suits you, and make sure that it ALWAYS gets loaded after your evil style sheet and before the CKEditor sheet. For example:

a { color: lemonchiffon !important; }

But please read the link...specficity is fairly specific.

Answer 2

The 2.x style wrapper iframe (which would by default solve this problem) was removed for performance reasons and is not possible via an option but only if I implement it my self.

What I did to overcome this problem was to modify the css files of the "kama" skin, adding !important rules to where I needed them. I don't feel this is an acceptable solution though.