Solved

need div to isolate code from external css

Posted on 2009-06-29
4
1,221 Views
Last Modified: 2012-05-07
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
0
Comment
Question by:St_Aug_Beach_Bum
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
tokyoahead earned 275 total points
ID: 24741943
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
 
LVL 6

Assisted Solution

by:coolersport
coolersport earned 225 total points
ID: 24742068
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
 
LVL 4

Assisted Solution

by:tokyoahead
tokyoahead earned 275 total points
ID: 24742097
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
 

Author Closing Comment

by:St_Aug_Beach_Bum
ID: 31636163
Sorry, I got redirected and onto other issues. closing this question and will keep it as reference.  Thank you all for your time.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now