Solved

need div to isolate code from external css

Posted on 2009-06-29
4
1,298 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 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

726 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