I have a widget which is injecting a popup into different web sites, as an absolute positioned div.
I want the popup to look the same on all. however, the paragraphs and other html elements inside the div are effected by the hosting site CSS.
Is there a way to reset all the properties of elements in the div in an efficient way without a css file which will have to consider all the options and element types?
Note: I need a clean javascript/css/html solution, Cant assume jQUery is available.
The best you can do is using an iframe for the widget content. There is no way to reset all the inherited CSS styles using only CSS.
Short anwer: To my knowledge, no.
Long answer: Since you don't want the current document's style to apply to the elements inside your absolutely positioned <div>, maybe the best would be to use an <iframe> element instead of a <div>.
That way, the popup elements would be isolated in their own document and would be independent from the current document's style. The document in your <iframe> may even have a different doctype, in case you require that.
Well you can arbitrarily set some style attributes with JS but it'll be a long list, it won't be pretty or efficient, and CSS is designed to achieve the exact opposite. You could also add an inline style block with some ID specific CSS selectors and I guess !important tags, but again it's not pretty - for one thing guaranteeing that ID is hard/impossible.
Basically if it's not your page, your control of it is (rightly) illusionary.
