How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

Tags: javascript,jquery,css,google-chrome,google-chrome-extension

Problem :

I am building a chrome extension in which I insert a div into webpage's body and set it's CSS position to fixed so that it floats over the page.

However, the host page's CSS gets applied over the div I am inserting and I don't want that to happen. How can I avoid that?

I tried applying normalize.css to get rid of the css being applied by host page but that doesn't seem to work.

Solution :

As far as I know, there are three solutions, the first one being ideal:

Put your content into an iframe. The parent's css won't apply inside of it. Demo here (click).

Reset every css style on your element and all of its children. See this answer (click).

Use inline styles all the way.

    CSS Howto..

    How to prevent this css shape to scroll left and right

    How to Mask Images with Dynamic Sizes to Shapes?

    How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to dim an image keeping transparency untouched with CSS or JS?

    CSS: How to make the padding-right between li even?

    Does anyone know how to create this 3d flip animation via CSS?

    How do I create a border for an image?

    How to change css file for this aim?

    How to center div using JQuery or CSS

    How to set footer responsive?

    how to align an image, bottom right of table cell by using css?

    How to use CSS to create a dynamic corner frame?

    How to detect css properties in div

    How to make a css 'snail'?

    How can I remove the border around all the cells in a table?

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    CSS3 Menu Layout and Gradient not showing

    How do I make my footer sit at the bottom of my content?

    how is at the rate import filename.css in style tag different from link tag to relate to css file

    How can I escape my application.html.erb file

    how to isolate firefox 17 rendering bug [closed]

    How to create vertically centered meeting borders on a div?

    How to make input and select to be same width in css

    How to create two containers within a row that responsively keep equal heights?

    How to style the entire first row of a table in css

    css how to align a graphic on page

    How to avoid Zalgo text bleeding all over place without totally removing it?