Trouble with CSS based Widget

[klaus777]

Hi Folks,

I'm building a widget that is intended to be integrated in third party websites. Now i'm in trouble.
When the widget runs in isolation everything looks fine. But when i put it into other people sites, i have various results ranging from the widget's functionality being disturbed up to the host site being disrupted.

My believe is that this is due to my CSS clashing with the host site's CSS. To validate my claim, i embedded the widget within a iframe before inserting it into the host site: both the host site and the widget behaved as expected.

My question: is there a way to complely prevent the host site's CSS to have any effect on my widget? That is without using iframes.

I don't want to use iframe because my widgets has some dialogs (using div) that are bigger than the normal widget. When iframe is used, only parts of these dialogs are visible.

Please help! Any idea is welcome.

Klaus L'Imbecile.

[LeadMagnet]

First thing that comes to mind is that your positioning is clashing with the host. Probably using absolute positioning at least in some places yeah?
Show us an example and it would help.

[likethegoddess]

You might try specing all your styles with classes. So, instead of p { * }, use .myclass p { * }, etc., etc.

[LeadMagnet]

I think if someone is capable of making a widget, they wouldn't make such an obvious mistake as to put a style on an entire element.

[Scriptage]

First thing that comes to mind is that your positioning is clashing with the host. Probably using absolute positioning at least in some places yeah?

If it's placed in a containing element then absolute positioning wouldn't affect the page. It could possibly be due to the dimensions of the widget i.e., if you have a div that is 300px X 300px and the widget is 350px X 400px then Internet Explorer would expand the div.

[LeadMagnet]

Not necessarily. If something that's absolutely positioned is not being properly contained within the widget, it can appear in the wrong place and "have various results ranging from the widget's functionality being disturbed up to the host site being disrupted".
The exact error was not specified.

[Scriptage]

Not necessarily. If something that's absolutely positioned is not being properly contained within the widget, it can appear in the wrong place

We're both arguing the same thing here bud:

If it's placed in a containing element then absolute positioning wouldn't affect the page

[LeadMagnet]

The first line of your post read that you were disagreeing with what i said.

[Scriptage]

I disagreed with your first post on the condition that his widget was placed inside a containing div, then you disagreed with me saying that it would affect the positioning if it was not properly contained ergo we both argued the same point in the end.

[LeadMagnet]

My head hurts...

@klauss - Just show us the damn widget.