Apply CSS to All Elements Within a Named div.

[cluettr]

I have an issue with some content. The css applied to my page at the highlest level removes nearly all of the default styling. Deep within the page I have a spot where I need all of the default styling the comes with a browser.

What I'm thinking is I need to appy the default syling to every element within a container. This may not be the best approach so if there is a better way to get this done I'd be open to ideas.

So this one spot in my page might look like this

...
...
...
<div id="tinymce">
<?= $content ?>
</div>
...
...
...

So within the container mention above with the id tinymce I would like every element within that container to have the default styling. So all <p> tags, all <li> tags, all <table> tags, etc... must be the default. Does anyone have the syntax I would use for this within an external css file?

[Fang]

#tinymce * {property:value;}

Note that the tinymce rte css will take precedence over your css.

[cluettr]

Thank you Fang for the response. I'm not quite sure that is what I'm after... logically I am looking to do the below:

#tinymce * 
   {
      LI { display: list-item }
      HEAD { display: none }
      TABLE { display: table }
      TR { display: table-row }
      THEAD { display: table-header-group }
      TBODY { display: table-row-group }
      TFOOT { display: table-footer-group }
   }

[Fang]

The table(elements) display values are not supported by IE, so that would be pointless.
Why would you need to reset to default values?

[cluettr]

I'm resetting to the default values because the container has css that destroys the defaults. I know this is a strange scenario but I'm using the Extjs framework which requires a css file which modifies quite a bit of the standard elements. In order for me to gain back the defaults where I need them I have to appy the css its container. I hope that makes sense.

[Wisest Guy]

#tinymce LI { display: list-item }
#tinymce HEAD { display: none }
#tinymce TABLE { display: table }
#tinymce TR { display: table-row }
#tinymce THEAD { display: table-header-group }
#tinymce TBODY { display: table-row-group }
#tinymce TFOOT { display: table-footer-group }

[Fang]

#tinymce li { display: list-item }
#tinymce head { display: none } /* head has no display property. This also indicates that tinymce is the id of html - seems unlikely */
#tinymce table {display:block; display: table }
#tinymce tr {display:block; display: table-row }
#tinymce thead {display:block; display: table-header-group }
#tinymce tbody {display:block; display: table-row-group }
#tinymce tfoot {display:block; display: table-footer-group }

For IE table elements are display:block

[cluettr]

Thanks guys, how is this supposed to be fined within the div?

Is it <div id=tinymce><?= $content ?></div> ?

[cluettr]

I think there stay may be some misunderstanding on what I am trying to do. Using this method will all of the html tags within the div inherit the styling defined in the css file by the #dfltmce id?

#dfltmce html, address,
   blockquote,
   body, dd, div,
   dl, dt, fieldset, form,
   frame, frameset,
   h1, h2, h3, h4,
   h5, h6, noframes,
   ol, p, ul, center,
   dir, hr, menu, pre { display: block }
#dfltmce li { display: list-item }
#dfltmce head { display: none }
#dfltmce table { display: table }
#dfltmce tr { display: table-row }
#dfltmce thead { display: table-header-group }
#dfltmce tbody { display: table-row-g

[Fang]

Provided there are no other style blocks it will work, with the exception of table elements in IE.

[cluettr]

Having instantiated some css to force the the specified div to inherit the default styling it still does not work and for the life of me I cannot figure out what is going on. In the below code nothing within the div is styled correctly wether I apply the css id or remove it. It still looks like something is hijacking my css. : (

<div id="dfltmce" style="width:<?= $screen_width - $panels_fixed_value - 104 ?>px;height:<?= $screen_height - 203 ?>px;">      
<?= $content ?>
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
</div>    

and the css (partial):

#dfltmce li              { display: list-item }
#dfltmce head            { display: none }
#dfltmce table           { display: table }
#dfltmce tr              { display: table-row }
#dfltmce thead           { display: table-header-group }
#dfltmce tbody           { display: table-row-group }
#dfltmce tfoot           { display: table-footer-group }
#dfltmce col             { display: table-column }
#dfltmce colgroup        { display: table-column-group }
#dfltmce td, th          { display: table-cell }
#dfltmce caption         { display: table-caption }
#dfltmce th              { font-weight: bolder; text-align: center }
#dfltmce caption         { text-align: center }
#dfltmce body            { margin: 8px }
#dfltmce h1              { font-size: 2em; margin: .67em 0 }
#dfltmce h2              { font-size: 1.5em; margin: .75em 0 }
#dfltmce h3              { font-size: 1.17em; margin: .83em 0 }
#dfltmce h4, p,
   blockquote, ul,
   fieldset, form,
   ol, dl, dir,
   menu            { margin: 1.12em 0 }
#dfltmce h5              { font-size: .83em; margin: 1.5em 0 }
#dfltmce h6              { font-size: .75em; margin: 1.67em 0 }