Proper way to isolate all elements under an element from external styles of project

I just included a new js calendar in my project. The calendar displays like this –

<div style="position: absolute;" id="container">
    <table cellspacing="0" cellpadding="0" align="center" class="DynarchCalendar-topCont">         
       <tbody>
          <tr><td>
             // lots of elements inside
          <td><tr>
       </tbody>
     </table></div>

The problem is that the view of the calendar is appearing distorted due to some styles in my project like this –

  • Twitter Bootstrap button click to toggle expand/collapse text section above button
  • Display of up/down buttons in table row reordering
  • PHP - Sending gzip compressed JS/CSS
  • Disable details/summary
  • When does IE7 recompute styles? Doesn't work reliably when a class is added to the body
  • IE11 Table Cell Height Collapsing With Position: Absolute contents
  • div#sel_filters div.fields div {
        margin-left: 10px;
    }
    
    div.filters div.fields div {
        float: left;
        padding: 7px 0 0;
    }
    ... and many more which apply to the elements inside
    

    There are many css files of the project. Since my calendar appears inside div.fields, the above styles apply to it as well. I am not considering altering the above project styles , as they may affect others.

    What is the proper clean way of not allowing any styles other than those in the jscalendar.css file to affect it. DO I only have this option of applying !important to the styles in the jscalendar.css, and searching all the extra attributes, which are only set by project css, and setting them 0 or null manually.

    In case it matters, I am free to include the jscalendar.css before/after project css files.

  • Button events and click depth
  • How to get multiple color rectangle using HTML5 Canvas?
  • NetBeans plugin to check for unused CSS/JavaScript selectors?
  • Preloading background images
  • Maximizing / Resizing a dialog window in CKEDitor
  • Stick second level navigation onclick
  • 3 Solutions collect form web for “Proper way to isolate all elements under an element from external styles of project”

    If you load your jscalendar.css after the other CSS files it should overwrite the other CSS directives.
    If you still have problems, you could add a class to the divs that should behave differently and then add a CSS directive after the others to overwrite the previous ones:

    div.filters div.fields div.yourClass {
        float: none;
        padding: 0;
        margin: 0;
    }
    

    The proper way to do this unfortunately is to fix your site’s CSS. What you’re doing by applying styles to elements directly such as div‘s is going to lead to a world of pain for future maintenance or changes.

    Avoid styling elements directly at all costs, use classes as much as possible, then IDs. Use elements with classes or IDs like div.foo or div#foo but not elements directly.

    You could get away with !important in your calendar CSS for now but I’d spend that time fixing your site’s CSS, as if ever you upgrade the calendar plugin you’re looking at painful times again.

    So take the hit now, look at the positive of having learnt how to do things properly and never repeat the same mistake again 🙂

    apply a unique id to the container and change your CSS to reflect the heritage that derives from that… direct styling will get you to where you wanna go, but its gonna cost you in the long run if you have to maintain this later down the road…

    but i must agree with Moin Zaman, if you hit this obstacle, its bound to happen again if you dont take care of it right now