Solved

Div tag to ignore css outside of div tag?

Posted on 2004-08-02
10
3,030 Views
Last Modified: 2013-11-19

Is there a way that I can do a div tag so that any css outside of the div tag is ignored?

For example:

---------------

<div id="selfcontained" style="no css outside this tag influences items inside this tag">

some css, text, etc, will go here

</div>

------------

The purpose: I provide content on other peoples sites.  I don't want any css they have on their site to influence the style of the content that I provide. This tag will go around the content I provide.

Thanks,      Chris
0
Comment
Question by:St_Aug_Beach_Bum
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11699528
Maybe the others will know of a way, but I don't. You can, of course, make all of your tags have a special class that has a special prefix that other sites will most likely not have, something that has your domain name in it, for example.

Regards,
${Zyloch}
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 150 total points
ID: 11699543
put the syling you want directly inline in the div. or use an iframe instead of a div and put the div content on its own page

Cd&
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 350 total points
ID: 11703789
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body
{
      font: 15px georgia, serif
}
div
{
      margin:20px 0;
      font-weight:bold;
      background-color:#cccccc;
      color:red;
}

</style>
</head>
<body>

<div id="your-content">

This text will be 30px Georgia and bold if the site contains the above general style rules...

</div>

<div id="also-your-content" style="font-weight:normal;">

This will remove the bolding - but what if they've also set the base text color as red and the background as grey?
In other words, you would have to specify every possible style that could get inherited...

</div>

<div id="more-of-your-content" style="font:12px verdana, sans-serif !important; background-color:#ffffff !important; color:#000000 !important; border:none !important; margin:0 !important; padding:0 !important;">

This will reset the font, style, color, borders, background, margin's and padding to your rules. The !important declaration will prevent any of these styles from being inherited in case your div id happens to match one of theirs.

</div>

</body>
</html>
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 11707893

Yes, seanpowell points out what I ran into, if I overlooked something that was defined in the overall css then that would effect my content.

I also have some table, center, and paragraph tags.  I guess what I will need to do is use seanpowell's list there on all my tags?  Are there any other commonly defined items I should include?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11707942
Do you have a specific format of using other site's contents? For example, if you have your header, their site, your footer, you can simply have your style at the top. Then, add a copy of that style right before the footer.

Regards,
${Zyloch}
0
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.

 
LVL 31

Expert Comment

by:seanpowell
ID: 11707999
Well, that may be getting too verbose St. Aug, and hard or impossible to maintain. It would be nice to see an example of how your content is being placed elsewhere.

The other option is to use the js version, as google does with their AdWords - as an example:

      <script type="text/javascript">
      <!--
      google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
      google_ad_width = 120;
      google_ad_height = 600;
      google_ad_format = "120x600_as";
      google_ad_channel ="";
      google_color_border = "999999";
      google_color_bg = "FFFFFF";
      google_color_link = "666666";
      google_color_url = "993300";
      google_color_text = "333333";
      //-->
      </script>
      <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

So show_ads.js write's the code to the web page and the accompanying inline script handles the presentation...
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 11711208

Hi Zyloch, I just a have a section in the body tag, entered there by the page author via a php statement.

seanpowell, yeh, I have been using something like that javascript, but want the content to be cached by search engines, so I am changing what I am doing to server side.

I think I will take some of  COBOLdinosaur's solution, putting css inline, and use seanpowell's css example for some tags, and try to minimize the tags I use so it's not increadiably verbose, and see how it goes.  I can play around with it some when I get things rolling and if there are issues I will be back with questions :)

Thanks everyone for your help,

Chris
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 11711224

It really is a shame though that there isn't a 'clear' style that you can put in a div tag that clears all formating from outside that div :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11711258
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11711308
Yep. You could try to include a copy of your <head> styles right after the php include statement.

Regards,
${Zyloch}
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

Title # Comments Views Activity
CSS Divs in Safari 3 41
Windows Tool to Build Android and iOS App 3 54
Can't get the PDF Icon to appear on the webpage 1 21
CSS Question 5 42
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 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

20 Experts available now in Live!

Get 1:1 Help Now