Search code examples
csstelerikcss-reset

Prevent CSS resets only within a certain section of HTML


For the past few years, I've been developing sites with Eric Meyer's CSS resets. I love it and will never look back. I never even thought of looking back. But then today, we implemented a Telerik Rad Editor control. Unfortunately the CSS resets break the internal layout of the Rad Editor as well. Is there some way to prevent the resets from cascading down into the Rad Editor.

Thanks in advance.


Solution

  • We use the RadEditor extensively in our application, and have found similar issues with it. I've been working with the editor CSS code for almost 2 years now, and have found it to be fairly easy to overcome these issues.

    Firstly, are you using a custom skin for the editor? This is the best way to overcome these issues. If you aren't you can simply add one by copying an existing theme and renaming it. This will allow you to modify the CSS in an external file, rather than trying to fiddle with overriding the stylesheet the is embedded in the Telerik assembly.

    After that, it's going to be a simple matter of isolating which styles are causing the issues. I'm guessing from your comments that the buttons are not rendering correctly, most likely because your reset stylesheet is overriding the default list styles. I would use firebug to see where the reset file is overriding styles defined in the stylesheet.

    Most likely it's because there is no style definition at all for things that are being reset, as anything defined in the Telerik stylesheets would be more specific than the reset styles, as they would contain a preceeding class name, which would increase the CSS specificity by 10.

    If you could provide more specifics, I'd be happy to try to help more.