Solved

Div tag to ignore css outside of div tag?

Posted on 2004-08-02
10
3,042 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
[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
  • 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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 

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
 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
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 to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

691 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