Prevent CSS resets only within a certain section of HTML

Question

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.

Answer 1

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.

Answer 2

You could use an iframe to delineate the CSS contexts. But, it makes some things harder.

Answer 3

No. That's one of inherent problems with CSS reset.

That's a $1000 control?! Perhaps you should give them a call and request making it compatible with CSS reset.

Reset makes some deprecated attributes from Transitional HTML unusable, but "industry's best" editor shouldn't be relying on these. Everything else is fixable with appropriate stylesheet.

Answer 4

Hardly, as there are no "excluding" statements in CSS. You would have to re-introduce the things the reset stylesheet removes.

But from experience, I'm quite sure the reason for the screwup is just one or two things going awry. It may be possible to examine and fix them in reasonable time.

Answer 5

Actually, you can specifiy specific CSS files for the RAD Editor to reference when it loads up. Just create a CSS file that adds in what the reset takes away and only the RAD Editor will reference that CSS file.

For example this editor will refence a specific file called 'radEditor.css" when it loads on a page.

<telerik:RadEditor ID="RadEditor1" runat="server" AllowScripts="True">
  <Content>
  </Content>
  <CssFiles>
    <telerik:EditorCssFile Value="~/css/radEditor.css" />
  </CssFiles>
</telerik:RadEditor>

Good luck, and hope this helps some.

Answer 6

I'm just adding this here for reference. Twitter Bootstrap makes most of the buttons disappear. Here is the fix. The EditorCssFile is just used to change the background color of the editor back to white.

<style type="text/css">
    .telerik img {
       max-width:none;
    }       
</style>

<div class="telerik">
    <telerik:RadEditor ID="RadEditor1" BackColor="White" ToolbarMode="RibbonBar" runat="server">
        <CssFiles>
            <telerik:EditorCssFile Value="/assets/css/editorContentArea.css" />
        </CssFiles>
    </telerik:RadEditor>
</div>

Answer 7

If you're trying to work out the styles the elements started with you could refer to one of the popular browser's default stylesheets - for example, here's the WebKit one for HTML. I presume from the markup you can narrow it down to just a few elements?

Edit: Here's the Gecko one.

Answer 8

You can find out what are the default values for the element (make an unstyled page with only the element and check with Firefox's DOM Inspector), then add the rules again at the end of your stylesheet with !important added to every rule.