Odd toolbar formatting due to existing stylesheet

[Tomica]

I am new to the entire suite of Telerik controls.

I have had found that the editor toolbars are formatted incorrectly in my own app, yet the locally installed samples work fine.

I tried tweaking various settings for skins, etc, which introduced format differences, but still leaving the toolbars unusable.

I ultimately traced this problem to the use of a standard stylesheet, as follows:

<link rel="stylesheet" type="text/css" href="cga.css" media=screen>

This sheet has been in use for several years, is quite simple, and myself being the programmer and not the designer, not knowledgeable to take an educated guess as to where the conflict is originating.

Is there a way to set RADedit to ignore whatever it might be inheriting from the page's default stylesheet?

Environment: Visual Studio 2008 / VB / IE 7

Problem occurs on Vista Ultimate running IIS 7.0 and Win Server 2003 running IIS 6.0.

I have the Q1 2008 release of RAD, purchased just last week.

[Lini]

Hello,

The problem is probably caused by some global styles in the cga.css stylesheet (e.g. styles that are applied to all <ul> or <li> or <span> elements on the page). Please open a formal support ticket and send us the cga.css stylesheet. We will examine it and send you the necessary overrides.

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tomica]

Done, ticket #134015

[Brian Shapiro]

I am having the same issue.

[Tomica]

Thank you, now I don't feel so bad <g>

[Rumen]

Hi guys,

Thomas, is it possible to send a sample working project that demonstrates the problem, because the provided information was not enough to reproduce it on our side.

Brian, we need a sample working project along with screenshot that demonstrate the appearance problem. Once we receive it and we are able to reproduce the issue, we will provide a solution.

Looking forward to hearing from you soon,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Brian Shapiro]

This is very easy to reproduce without me sending you my project.

Add an editor control to a webpage.

Create a stylesheet (name it whatever) and link it into your webpage.  In the stylesheet, create the styles below.

ul
{
margin: 10px 0px;
padding-left: 25px;
list-style-type: none;
}
ul li
{
background: url(../img/icons/bullet.gif) no-repeat;
background-position: 0em .4em;
padding-left: 1.3em;
}
p{
padding: 0px;
margin: 0px;
}

Then run the project and you will see the problem.

I first tried to fix it by not using an emeded stylesheet and i copied all the style resources from the program file directory and then made the changes need to overcome the above global classes.  Problem was that the dialogs didnt appear correctly and it turned out to be a big pain so i stopped that strategy until i heard back from you.

Then i tried to wrap the editor in a DIV and added styles for that DIV that overcame the above global styles.  That worked but the problem was that the ul li settigns not only affected the toolbar but also any bullets in the content so i stopped that strategy until i heard back from you.

As it stands now, all i could do was remove the above 3 global styles until i heard back from you.  While we are in a development project now so i could do that for a day or so, we are going to post a new build sunday and not having those three global styles is not going to be an option.

[Tomica]

Brian, this tracks with my suspicions.

I had dabbled with DIV and other local style variations, but with the same result.

After reading your post, I removed the LI styles and the problem has dissappeared.

My current working hypothesis is that the Editor is unusually susceptible to its working environment.

I can live without a global LI style, as I used UL/LI as a crutch to avoid investing in learning CSS until I was sure that the Internet would be a success. It is <g>

All kidding aside, the few pages that absolutely need UL/LI are not the ones that will have RADEditor, so I think you have solved at least my problem.

As for yours, it maybe be helpful to know that I did find I could retain a simple LI that did not include margin or any other layout measurements. If this holds for you, then I would amend the thread title to "Improper toolbar spacing due to global UL/LI styles"

li

{
list-style-image: url(images/blue_bullet.gif);
list-style-type: disc;
}

[Brian Shapiro]

Unfortuanately, i have a very large site (www.altMD.com) that uses nested master pages and a very common framework for both public and back-end pages so its hard for me to kill my global styles.  I was able to use their stylesheet and make it work but it screwed up the dialogs and i didnt want to take the time to work around that problem before i heard back from them.

glad to hear that you are back in biz.

[Rumen]

Hi Brian,

Generally, it is not recommended to use global styles with third party controls because obviously the third party controls consist HTML and your global styles can easily spoil their design.

Since the editor's toolbar consists of lists it is very easy to spoil its design by defining global UL and LI classes on the page.
If you have the following classes defined on the page with the editor:
ul
{
margin: 10px 0px;
padding-left: 25px;
list-style-type: none;
}
ul li
{
background: url(../img/icons/bullet.gif) no-repeat;
background-position: 0em .4em;
padding-left: 1.3em;
}
p{
padding: 0px;
margin: 0px;
}

then you can fix the problem by putting after them the following class:

.rade_toolbar li
{
  padding: 0;
  margin: 0;
  list-style: none;  
}

In more complex scenarios it will be much harder to fix the global style problems.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center