CODEWITHSUNDEEP
htmlgoogle-chrome-extension
Hoshin
Hoshin

Reputation: 454

How to get rid of parent webpage styles

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?

Upvotes: 2

Views: 209

Answers (2)

Anatoly G
Anatoly G

Reputation: 4152

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.

Upvotes: 1

cambraca
cambraca

Reputation: 27835

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.

Upvotes: 0

Related Questions