EditorToolsFile.xml <cssFiles> not working in IE8?

[Chris Emerson]

I am trying to add a couple styles to the [Sitefinity] RadEditor "content area" so my anchor tags are highlighted (via background-color css). I'm using the <cssFiles> section of EditorToolsFile.xml to do this and it works great in Firefox/Chrome - but isn't working at all in IE8 or IE7. I've tried deleting my cache, restarting IIS etc but no matter what I try, it seems nothing my external CSS file declares is being rendered/obeyed by IE.

Can anyone help/advise on this?

[Rumen]

Hi Chris,

This is most likely an IE browser limitation. Is it possible to paste in this forum thread your anchor css classes so that I can test them and confirm whether this is IE behavior?

Thank you for your cooperation.

Best wishes,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris Emerson]

Sure.

* a[name]{
    background-color:#9be0b5 !important;
    background-image:url(http://design.rmsource.com/cemerson/images/anchor.png);
    background-repeat:no-repeat;
    background-position: left center;
    padding-left:19px !important;
}

* a[href]{
    background-color:Transparent !important;
}

I am using CSS selectors - but nothing I haven't used in IE before. But even when I simply try something like this it doesn't work in IE!?

*{
font-size:4px !important;
}

[Rumen]

Hi Chris Emerson,

The class below works fine in IE and FF

<style type="text/css">
      *{  
        font-size:4px !important;  
       }
    </style>

For your convenience I have attached my test project.

However the css classes for anchors works only in Firefox. I tested them in a standard HTML page (editableIframe.html attached to my reply) with an editable IFRAME in it and the anchor icon was not displayed in the content area.

Here is the syntax that I used to display the anchor icon in IE:

<style type="text/css">
      * a{  
    background-color:#9be0b5 !important;          
    background-image:url(http://design.rmsource.com/cemerson/images/anchor.png);   
    background-repeat:no-repeat;  
    background-position: left center;  
    padding-left:19px !important;  
}  
    </style>

My suggestion is to import this class in RadEditor through the CssFiles property.

Best wishes,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris Emerson]

Thanks for looking in to this so quickly.

RE: "My suggestion is to import this class in RadEditor through the CssFiles property."
I've tried this but haven't had any luck getting the CSS selectors to work any better so I'm sticking with using the <cssFiles> section of my EditorToolsFile.xml file for now.

So it appears that CSS selectors don't work in the RadEditor's content area - why is this? It works outside RadEditor just fine in IE (?).

[Rumen]

Hello Chris Emerson,

As I explained in my earlier post the content area of RadEditor is an editable IFRAME and it uses the Rich Text Editing engine of the browser in which it operates. This engine is used by the editable DIV and IFRAME elements and since it is implemented by different developers behaves differently with the css, javascript and HTML content. The reported css selector problem is a browser behavior of the RTF engine of Internet Explorer and unfortunately we cannot override it with code. You will experience the same behavior with the competitors' DHTML based editors as well as with the standard editable DIV / IFRAME elements.

Sincerely,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.