?
Solved

need div to isolate code from external css

Posted on 2009-06-29
4
Medium Priority
?
1,381 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
tokyoahead earned 1100 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 900 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 1100 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

771 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