How to reset a div CSS completely using CSS or jQuery
I have a template, and I want to show that HTML template inside a div.
That HTML CSS template automatically inherits the CSS used in the application.
I want it not to inherit the CSS. I need to reset the styles for that one div completely...
Sample code:
<html>
<head><title>hi</title>
<link href="mystyle.css" />
</head>
<body>
This is my website content
<div id="template_holder">
<table>
<tr>
<td>name</td>
<td>Raja</td>
</tr>
</table>
</div>
</body>
</html>
In the above code the template_holder holds a table which inherits the styles from mystyles.css.
I don't want it to inherit i开发者_Go百科t...
For this kind of situations an iframe may be the right choice.
Alternatively, you should add a class or id or some other referencing parameter to your page template main tag, and reference every CSS rule in your page to that main element only, by have every css selector start with that main reference. But this is something you may be unable to do if you don't have control over the template CSS.
Beware that showing a template inside a div in your page may contain duplicate IDs, for example many templates commonly use the same IDs for the same elements (#header, #footer, #main, #wrapper, ecc...). You can avoid both this with an iframe.
Edit
After seeing your code example, I would create a CSS reset specifically for your #template_holder div, eventually with the !important keyword so that every other element inside it will inherit the CSS of it.
Don't know if this will work, but it's worth giving it a try.
I'm not sure I understand the situation exactly but you should take a look at the !important css declaration, that could work.
edit: With the clarification in code what I suggested could look like
#template_holder table {
//override whatever like background-color:White!important;
}
In this situation iframe usage is the best
加载中,请稍侯......
精彩评论