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
Solved

Div tag to ignore css outside of div tag?

Posted on 2004-08-02
10
3,038 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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 tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

792 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