How to get rid of parent webpage styles

Question

I am developing a Google Chrome extension.

Extension shows a dialog box (jquery ui, as a div) inside any webpage, in the dialog box user can add some content [HTML content without body, without styles info].

The problem i am facing is, that the styles specified in the webpage are getting applied to the jquery dialog and the content user is adding.

For ex. when i launch my plugin on stackoverflow webpage, all text become center aligned, etc etc.

What is the best way to get rid of parent styles inside a div?

Answer 1

I've done that using an IFRAME, which basically creates a whole new html document inside a box, without the styles from the "parent" page. The other option is to redefine all the styles in your div, but that's very tedious and ugly.

Answer 2

you should look into the reset stylesheets almost every CSS framework comes with. You can take that reset stylesheet and apply all of the reset styles to your specific DIV:

div.YourDiv, div.YourDiv * {
   margin:0;
   padding:0;
   border:0;
   ...
}

which should reset both YourDiv and all elements below. After that, you can get started w/ styling the sub elements as you see fit.

Answer 3

I am also facing same problem, I will try and let you know.