?
Solved

Div tag to ignore css outside of div tag?

Posted on 2004-08-02
10
Medium Priority
?
3,043 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 600 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 1400 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

777 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