Reputation: 9151
I've written a pretty basic widget for voting, users install it pretty much like the Google analytics code by simply adding a JavaScript code to the bottom of their code.
A problem I have noticed now on some pages that use broad CSS rules is that the widget design gets a bit messed up. In my widget CSS I have specified unique names so that should not be a problem.
However when a target page uses rules like:
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
It effects the look of my widget.
Any ideas how I can solve this?
Edit: I've tried cleanslate - https://github.com/premasagar/cleanslate but this resets the css on the target page as well
Upvotes: 1
Views: 427
Reputation: 376
Use !important
for the css of your widget.
Example:
.widget {
font: 16px Arial !important;
}
Upvotes: 0
Reputation: 344803
Put your widget in an iframe, then it won't be affected by anything on the target page.
Upvotes: 0