Solved

need div to isolate code from external css

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I change this hyperlinked phone number to be black and is it working? 2 58
CSS issue 8 40
css issues with IE 11 8 42
Input box width 6 32
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

828 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