Hell is other people's CSS rules

A significant part of the JavaScript code I wrote in the last few years is intended to run as part of HTML pages developed by other people.

Now consider the following:

Lets say your JavaScript has a function called "AddButton" that takes a background color, a text color, some text for the button itself and a callback function to call when the button is pressed. and it renders the HTML and CSS that will show this button on the client's page. (Of course in real life this is much more complicated bu this should do to make the point).

You create perfect code, test it on FF,Chrome,IE,Safari,iPhone,iPad and what not, and it looks perfect and works great.

Now your customers/clients start to use your wonderful code and it turns out that one of them has a CSS rule that says "DIV {left-margin:5px}" which causes the texts on your perfect button not to be centered on his site.

So you go and change you code to rended style tags on all your divs saying that their left-margin (and right and top and bottom) are 0px, so your good now.

But then it turns out that another client has "Div {border:1px solid white}" ....
and so on (and of course this is not limited to divs...

How "defensive" should you be "against" the CSS ruls of the hosting page? and what can you do assuming that you don't want to start adding all the possible CSS attributes to every tag you render ?

How would you go about handling this?

Oh... and IFRAMEs are not a valid solution. Well, actually some times they are but lets assume this is not one of those times - why ?

1) Performance
2) Your generated html is required "flow" as part of the hosing page.

Any JavaScript / HTML /CSS lover out there would care to share his thoughts on this ?

Eyal