RadEditor Styling Problems in IE 6

[Gary]

Hi,

We have built a c# .net web application. The app has various controls on a page including text boxes and drop down lists etc, we have also included a radeditor control. In all other browsers the look of the page is fine, but in IE 6 the styling breaks.

Firstly the top border of the radeditior is missing and then other controls on the page move position.

I attach 3 screen shots to illustrate.

Normal.jpg shows how the page should look
Broken 1.jpg shows the missing top border of the radeditor frame
Broken 2.jpg shows how the other fields on th page have moved.

Has anyone else had the same problem and can advise how to resolve this.

I look forward to hearing from you.

Regards
Gary

[Shonda]

I had a similar problem where my editor was not displaying properly.  I looked high and low for an answer for quite a while.  I finally found my solution only after I gave up and put it aside for a while.

I was able to fix my problem by using the StyleSheetManager control:

<telerik:RadStyleSheetManager ID="RadStylesheetManager1" runat="server" />

It turns out that IE has a CSS limitation where is can only load 31 stylesheets per page.  See the link below for more information about this limitation.

http://blogs.telerik.com/kamenbundev/posts/10-05-03/internet_explorer_css_limits.aspx
(Sorry the hyperlink button is not working preperly)

[Dobromir]

Hi,

As Shonda mentioned, a possible reason for the reported behavior is the number of loaded CSS files under Internet Explorer. The RadStylesheetManager combines the css files that decorate RadControls and should fix the issue. If this is not the case, could you please provide more detailed information on the specific scenario? Could you please provide a sample page and / or a live URL demonstrating the problem so we can investigate it further?

Greetings,
Dobromir
the Telerik team

[Gary]

Hi,

Thank you both for your suggestions. I have added the RadStyleSheetManager control that Shonda had suggested and this has resolved some of the problems but not all.

What is still happening is that the top border of the RadEditor is not being shown and the drop down list that appears on the page above the RadEditor has its list items displayed to the screen as well as in the list control.

The RadEditor control is the Requirements field on the page.
The drop down list where its list items are being displayed outside its control is the Contract Type field.

Unfortunately I can not provide you with a url to investigate as it is on our UAT server which is only available to internal staff. What I can do is to attach screen shots of what is happening.

The source code that we are using, along with the css styling that is relevant to this can be found here Source Code.

I also attach a screen shot of what the page should like like (taken from IE8).
I also attach a screen shot of the page in IE6 with the issues highlighted in red (Display IE 6.jpg)
I also attach a screen shot of the page in IE6 which shows the list items from the Contract Type drop down list. (Display IE 6 Text Source.jpg). As you can see the items from this list are appearing as text under its control and before the Rad Editor.

I look forward to hearing from you.

Regards
Gary

[Dobromir]

Hi Gary,

Thank you for the provided additional information. However, I was unable to reproduce the problem using the HTML dump. Could you please provide the aspx code with the custom CSS, or at least the full HTML dump containing the JavaScript responsible for registering the RadEditor on the page.

Regarding the option's list displayed outside, such rendering problem might occur if by some reason the <select> tag is missing. Could you please provide more detailed information on the subject?

• What control(s) is used to display the dropdowns?
• Are there any JavaScript errors thrown on the page?

In order to provide further assistance we will need to reproduce the problem on our side and examine it. Could you please provide a simple project reproducing the problem?
All the best,
Dobromir
the Telerik team

[Gary]

Hi,

I have created a small web application that demonstrates the behaviour described.
You can download the code form here: TelerikDisplay Test App

The application is built using Visual Studio Team System 2008 (Development Edition).
The code behind is C# although there really isn't much code; a little pre-configuration of dropdown lists and some JavaScript injection.
The project is self contained except for the Telerik.Web.UI.dll 2009.2.826.35.
Everything is in the Default.aspx page.

The controls are created inside unordered lists. (This is supposed to help with users who use screen readers, as the reader will tell them how many elements (form fields) are present in the form.) In order to stop some more styling issues I had to separate the UL into two. If you remove the following lines you can see the original styling errors:

248    </ul>
249
250    <ul class="form">

Regards,
Gary

[Dobromir]

Hi Gary,

Thank you for the provided project.

The problem with the RadEditor's top border is caused by a applied margin-top: -2px from the custom skin. Could you please remove this rule from the following CSS selector and see if the problem still occurs:

.RadEditor
{
    height: 87px !important;
    min-height: 81px !important;
    width: 206px !important;
    background-color: white !important;
    margin-left: 232px !important;
    margin-top: -2px !important;
}

Regarding the displayed list items, after further investigation, I noticed that the problem is caused by the hidden list items (the ones with CSS class hiddenfields. My suggestion is to take different approach to programmatically display these fields.

Regards,
Dobromir
the Telerik team

[Gary]

Thank you for all of your suggestions.. We have now fixed the problem. It was caused by the CSS stylesheet of the telerik controls

[sahil]

I have a RadEditor On my Page , But it give following attached styling Error. In IE it is totally showing dotted lines and in mozilla first of all it bling then show editor.

I have tried all the above solution, but no one work.

Thanks
Sahil Kaundal

[Dobromir]

Hi Sahil,

This problem might occurs if by some reason RadEditor was unable to load its skins correctly. Could you please register the external RadEditor skins as it is shown in this KB article: Registering an external skin of RadEditor?

You can also take advantage of the recently introduced CDN support which will allow you to load the controls skins from the Telerik CDN. Telerik CDN is hosted on the Amazon CloudFront service.
You can find more information about our CDN support here and here.

By loading the external or CDN skins you will ensure that the editor will load its skin.

If none of the above help could you please provide more detailed information on the specific scenario?

• Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?
• Could you please provide a sample project and / or a live URL reproducing the problem so we can investigate it further?

Best wishes,
Dobromir
the Telerik team