Solved

Div tag to ignore css outside of div tag?

Posted on 2004-08-02
10
3,026 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

758 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

19 Experts available now in Live!

Get 1:1 Help Now