Hi, cant find anybody else with this problem but I have a page with a unordered list and an editor on. I want to style my ul (its outside the editor) and add margin and change bullet type but it affects all the buttons on the editor.
How can I change style for ul li items on a page without screwing the editor tool bar.
Simple example case below:
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
ul li
{
list-style-type: square;
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li>This is my nice unordered list</li>
<li>This is my not so nice editor</li>
</ul>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadEditor ID="RadEditor1" Runat="server">
</telerik:RadEditor>
</form>
</body>
</html>
How can I change style for ul li items on a page without screwing the editor tool bar.
Simple example case below:
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
ul li
{
list-style-type: square;
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li>This is my nice unordered list</li>
<li>This is my not so nice editor</li>
</ul>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadEditor ID="RadEditor1" Runat="server">
</telerik:RadEditor>
</form>
</body>
</html>
5 Answers, 1 is accepted
0
Hi David,
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. Nevertheless, here is how to override the global styles:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
/* global styles */
ul li
{
list-style-type: square;
margin: 10px;
}
/* override global styles to fix RadEditor styles */
ul.rade_toolbar,
ul.rade_toolbar li
{
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager>
<ul>
<li>This is my nice unordered list</li>
<li>This is my not so nice editor</li>
</ul>
<telerik:RadEditor ID="RadEditor1" Runat="server">
</telerik:RadEditor>
</form>
</body>
</html>
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
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. Nevertheless, here is how to override the global styles:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
/* global styles */
ul li
{
list-style-type: square;
margin: 10px;
}
/* override global styles to fix RadEditor styles */
ul.rade_toolbar,
ul.rade_toolbar li
{
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager>
<ul>
<li>This is my nice unordered list</li>
<li>This is my not so nice editor</li>
</ul>
<telerik:RadEditor ID="RadEditor1" Runat="server">
</telerik:RadEditor>
</form>
</body>
</html>
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
David
Top achievements
Rank 1
Rank 1
answered on 17 Jul 2008, 12:23 PM
> 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. Nevertheless, here is how to override the global styles
Sorry but how can this be right, all I am trying to do is set the style of li's on my page. Are you suggesting I need to class or id every unordered list on my page because I added a third party control?
Am I not right in saying that the "control developer" (Telerik in this case) should set the styling they require explicitly (you are not doing so in this case).
If I add this hack to do the controls styling in my page and you upgrade the control it risks breaking, also why should I have to add control style properties in my style sheet to fix this.
As in the example what I am trying to do its quite common and simple, is there another way I should be doing this?
> because obviously the third party controls consist HTML and your global styles
> can easily spoil their design. Nevertheless, here is how to override the global styles
Sorry but how can this be right, all I am trying to do is set the style of li's on my page. Are you suggesting I need to class or id every unordered list on my page because I added a third party control?
Am I not right in saying that the "control developer" (Telerik in this case) should set the styling they require explicitly (you are not doing so in this case).
If I add this hack to do the controls styling in my page and you upgrade the control it risks breaking, also why should I have to add control style properties in my style sheet to fix this.
As in the example what I am trying to do its quite common and simple, is there another way I should be doing this?
0
Hello David,
Let me explain you in brief why it is not recommended to use global styles with 3rd party controls.
Practically any CSS property can be assigned to any html element (with a few exceptions). When we create the css code for our controls, we use only the properties that we need for our particular case, for example, if we want to set the paddings and margins of a list item to null, we set:
li.our_list_item
{
padding: 0;
margin: 0;
}
... and this is enough to style our list item properly.
But what happens if users set their list-item styles globally and use, for example border (by default, list-items do not have any border and this is uncommon use of the border property):
li
{
border: solid 1px red;
}
... the result with your css will be okay, and your list-items will get the border, but what will happen to Telerik's list items? They will inherit your rule:
li.our_list_item
{
padding: 0;
margin: 0;
border: solid 1px red;
}
... which will spoil our design.
What would happen if we take the reciprocal example? Imagine that in some of our skins we have global styles for the body element of the page?
body
{
bacgkround: lime;
line-height: 123em;
}
... the result will be obvious. If you have not set these two properties in your <body> rule, your page will inherit our settings and again the design will be spoilt.
Another very interesting case is the asterisk css reset (a practice that is totally rejected, but still used by developers):
*
{
color: red;
border: solid 1px green;
background: blue;
padding: 0;
margin: 0;
list-style: none;
}
... again, this approach might be suitable for the design of the page, but will spoil the design of 3-rd party controls.
We are not able to determine any possible usage of a CSS property in order to reset it. Even if we do so, this is unpractical and will boost our CSS files immensely, that will lead to performance issues.
Instead of global styles (no matter how basic they are) it is recommended to use classes, otherwise such problems will keep coming, especially with exotic and rarely used properties.
Regards,
Martin Ivanov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Let me explain you in brief why it is not recommended to use global styles with 3rd party controls.
Practically any CSS property can be assigned to any html element (with a few exceptions). When we create the css code for our controls, we use only the properties that we need for our particular case, for example, if we want to set the paddings and margins of a list item to null, we set:
li.our_list_item
{
padding: 0;
margin: 0;
}
... and this is enough to style our list item properly.
But what happens if users set their list-item styles globally and use, for example border (by default, list-items do not have any border and this is uncommon use of the border property):
li
{
border: solid 1px red;
}
... the result with your css will be okay, and your list-items will get the border, but what will happen to Telerik's list items? They will inherit your rule:
li.our_list_item
{
padding: 0;
margin: 0;
border: solid 1px red;
}
... which will spoil our design.
What would happen if we take the reciprocal example? Imagine that in some of our skins we have global styles for the body element of the page?
body
{
bacgkround: lime;
line-height: 123em;
}
... the result will be obvious. If you have not set these two properties in your <body> rule, your page will inherit our settings and again the design will be spoilt.
Another very interesting case is the asterisk css reset (a practice that is totally rejected, but still used by developers):
*
{
color: red;
border: solid 1px green;
background: blue;
padding: 0;
margin: 0;
list-style: none;
}
... again, this approach might be suitable for the design of the page, but will spoil the design of 3-rd party controls.
We are not able to determine any possible usage of a CSS property in order to reset it. Even if we do so, this is unpractical and will boost our CSS files immensely, that will lead to performance issues.
Instead of global styles (no matter how basic they are) it is recommended to use classes, otherwise such problems will keep coming, especially with exotic and rarely used properties.
Regards,
Martin Ivanov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
David
Top achievements
Rank 1
Rank 1
answered on 18 Jul 2008, 09:03 AM
Hi Guys,
Firstly let me thank you for a great product and an extremely fast response on the forums.
I believe this is a bug in your product and should be addressed and also that the previous poster is wrong about a couple of things.
If you look at my simple example we are not talking about "uncommon style properties" we are talking about very common ones like margin / padding on list items.
I cant make it any simpler, on ANY page with an Editor (as per my very basic example) ANY attempt to set the margin / padding of list items on that page will break the editor toolbar buttons. Its that simple. The reason is that at no point do you set any properties on your toolbar buttons li class in your own style sheets.
Your two workarounds will work for me but they are not ideal by any means. They will rely on me having to class all my unordered lists bloating my html, or putting a hack in my style sheet which should not be neccesary and may break in time if I upgrade to a version of your control where any class names have changed.
Further more while I agree with most of what you say bear in mind that it is good practice (and most web developers do this) to use a reset.css to set all properties for all elements to a standard, this makes it easier to develop a site design that works cross browser (take a look at YUI reset for example). Although not related to this specific problem I believe this make have scope to cause issues based on what you said about how you are setting up your style sheets.
Dave
Firstly let me thank you for a great product and an extremely fast response on the forums.
I believe this is a bug in your product and should be addressed and also that the previous poster is wrong about a couple of things.
If you look at my simple example we are not talking about "uncommon style properties" we are talking about very common ones like margin / padding on list items.
I cant make it any simpler, on ANY page with an Editor (as per my very basic example) ANY attempt to set the margin / padding of list items on that page will break the editor toolbar buttons. Its that simple. The reason is that at no point do you set any properties on your toolbar buttons li class in your own style sheets.
Your two workarounds will work for me but they are not ideal by any means. They will rely on me having to class all my unordered lists bloating my html, or putting a hack in my style sheet which should not be neccesary and may break in time if I upgrade to a version of your control where any class names have changed.
Further more while I agree with most of what you say bear in mind that it is good practice (and most web developers do this) to use a reset.css to set all properties for all elements to a standard, this makes it easier to develop a site design that works cross browser (take a look at YUI reset for example). Although not related to this specific problem I believe this make have scope to cause issues based on what you said about how you are setting up your style sheets.
Dave
0
Hello David,
The CSS issues that have arisen after the inheritance of global styles are not bugs with our products, but a logical consequence of CSS inheritance - our elements cascadingly inherit properties (that are not explicitly set) coming from global style.
We will put your points into a serious consideration and will create a list with the properties that have to be set explicitly in our styles. Unfortunately we cannot afford hardcoding them (!important), because this will prevent external modification that is required sometimes by our customers.
The CSS reset is a good approach, and actually it was first suggested by Eric Meyer, not by Y!UI, and I believe his version is far better than the one of Yahoo, but again - it should be used very carefully (i.e. developers should remove unused properties to avoid future problems).
Have a great weekend,
Martin Ivanov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
The CSS issues that have arisen after the inheritance of global styles are not bugs with our products, but a logical consequence of CSS inheritance - our elements cascadingly inherit properties (that are not explicitly set) coming from global style.
We will put your points into a serious consideration and will create a list with the properties that have to be set explicitly in our styles. Unfortunately we cannot afford hardcoding them (!important), because this will prevent external modification that is required sometimes by our customers.
The CSS reset is a good approach, and actually it was first suggested by Eric Meyer, not by Y!UI, and I believe his version is far better than the one of Yahoo, but again - it should be used very carefully (i.e. developers should remove unused properties to avoid future problems).
Have a great weekend,
Martin Ivanov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center