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..

    Sidebar, Navigation and Content how to do it?

    How do I manipulate the same function in javascript for two different classes

    How do I place a DIV class in a specific position over another DIV class?

    In CSS, how to not float a 300px wide Div to the next line?

    How to override\edit Zurb Foundation base CSS styles?

    How to automatically resize a box to fit content — with jQuery Mobile

    How to apply CSS to first child div element only?

    How to apply CSS color on parent element using a color picker?

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How to style focused and visited anchors when scrolling with CSS / jQuery

    How do I handle the hover in this recursive menu using jQuery?

    How do I change the order of elements and control flow in responsive css

    How to center this input using css only

    How to make
  • expand with CSS (like
  • How to fade out after hover is done using CSS

    How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

    How do I add HTML files to a GitHub repo?

    How to detect which button is clicked in javascript?

    popup mask is very very quickly shown

    How to override style of single RichFaces component

    How to align my dropdown menu to center of the page?

    jQuery hide() and show() not working as expected

    How to create a scrolling background image with css/jquery/html

    Entire window becomes blur after a modal is shown jQuery why?

    CSS visited links- how to recognize visited links which visited by clicking through my app?

    How to make a floated element take the entire width of its parent

    How to position the whole site? css positioning problem [closed]

    How can I center a div within another div?

    RoR - howto convert some HTML-elements with css to Rails