RadEditor Styling Problems in IE 6

10 posts, 1 answers
  1. Gary
    Gary avatar
    10 posts
    Member since:
    Feb 2009

    Posted 30 Sep 2010 Link to this post

    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
  2. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 04 Oct 2010 Link to this post

    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)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 05 Oct 2010 Link to this post

    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
    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
  5. Gary
    Gary avatar
    10 posts
    Member since:
    Feb 2009

    Posted 06 Oct 2010 Link to this post

    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
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Oct 2010 Link to this post

    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
    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
  7. Gary
    Gary avatar
    10 posts
    Member since:
    Feb 2009

    Posted 11 Oct 2010 Link to this post

    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
  8. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 13 Oct 2010 Link to this post

    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
    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
  9. Gary
    Gary avatar
    10 posts
    Member since:
    Feb 2009

    Posted 18 Oct 2010 Link to this post

    Thank you for all of your suggestions.. We have now fixed the problem. It was caused by the CSS stylesheet of the telerik controls
  10. sahil
    sahil avatar
    35 posts
    Member since:
    Jul 2008

    Posted 08 Nov 2010 Link to this post

    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
  11. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Nov 2010 Link to this post

    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
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017