need div to isolate code from external css

I have content (widgets) delivered to other sites through php.

I set up my widgets, with tables, text, links, javascript.... and get it all looking just right.  But sometimes, when a webmaster has some general css on thier pages, their css gets applied to the html code in the widget and messes up the formatting.  

 do apply css to some elements within my code, but if I don't define a property and the webmaster using the widget on their page has a general definition for it, the widget gets messed up.

Is there any way to wrap my code in a div, or span, or something, in such a way that it will isolate my widget from the other css code that is on (applied) the page?  

Thanks,  Chris
St_Aug_Beach_BumAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tokyoaheadCommented:
it's a question of "specificity", which determines where a CSS instruction is overruling another.

check out this page here:

http://www.w3.org/TR/CSS21/cascade.html#specificity

This says that a style defined inside the actual element such as

<img style="...."> is always overriding previous declarations.

make sure you override whatever might be given by the including page, such as classes, IDs, tag styles. also use classes & ids that are most likely unique to your code.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
coolersportCommented:
tokioahead is right. But hardcoding it with inline styles is a real pain and hard to maintain. You may try out some or combination of the following techniques:

1. Apply unique id for elements of your widget.
Element id's style has second priority after inline one. Therefore, your client code would never override your style with their "normal" style set.

<div id="my_unique_widget">...</div>

#my_unique_widget {border:1px solid #000}

2. Add !important flag to the property when necessary.
If those webmasters are so stubborn so they apply some not-"normal" style set with their own !important flag in their style. So you can use it too.

//their style
div {border:1px dotted red !important}

//your style need to change to
#my_unique_widget {border:1px solid #000 !important}

In this case, important flag will help you win the race.

3. "Reset" attributes that my be accidentally set by others.
Hum, my widget doesn't need background color. So I don't need to set one for it. Nope, this is why I said "accidentially".

//their style
div {background-color: red}

//your old style
#my_unique_widget {border:1px solid #000 !important}

//your style need to change to
#my_unique_widget {border:1px solid #000 !important; background-color:transparent}

So, it is not just background color but could be anything. The more you set it to your widget, the better chance it will remain the intended look.

4. You CANNOT win the webmaster
At the end of the day, webmasters have the control over what to be displayed on their websites. They might want to change your default look and they ABSOLUTELY CAN do so by:

a) Load their stylesheet after yours.
b) Use the same ID to set particular style.
c) Use advance javascript to alter your widget code (HTML).
d) Even remove your inline styles
... the list of possibilities is more...

Hope that will give you a better understanding of what you can do to avoid unintended breakage of your widget. REMEMBER POINT 4 :D

Cheers,
Tien
0
tokyoaheadCommented:
the !important attribute does not work with some versions of internet explorer as you can see here:

http://www.webdevout.net/browser-support-css#css2importance


0
St_Aug_Beach_BumAuthor Commented:
Sorry, I got redirected and onto other issues. closing this question and will keep it as reference.  Thank you all for your time.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.