www.webdeveloper.com
Results 1 to 11 of 11

Thread: Apply CSS to All Elements Within a Named div.

  1. #1
    Join Date
    Jan 2006
    Location
    Gloucester, MA
    Posts
    148

    Apply CSS to All Elements Within a Named div.

    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

    PHP Code:
    ...
    ...
    ...
    <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?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    #tinymce * {property:value;}
    Note that the tinymce rte css will take precedence over your css.

  3. #3
    Join Date
    Jan 2006
    Location
    Gloucester, MA
    Posts
    148
    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:

    Code:
    #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 }
       }

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The table(elements) display values are not supported by IE, so that would be pointless.
    Why would you need to reset to default values?

  5. #5
    Join Date
    Jan 2006
    Location
    Gloucester, MA
    Posts
    148
    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.

  6. #6
    Join Date
    Aug 2005
    Location
    Universe #384918862154 - third door on the left
    Posts
    236
    Code:
    #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 }

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    #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

  8. #8
    Join Date
    Jan 2006
    Location
    Gloucester, MA
    Posts
    148
    Thanks guys, how is this supposed to be fined within the div?

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

  9. #9
    Join Date
    Jan 2006
    Location
    Gloucester, MA
    Posts
    148
    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?

    HTML Code:
    #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

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Provided there are no other style blocks it will work, with the exception of table elements in IE.

  11. #11
    Join Date
    Jan 2006
    Location
    Gloucester, MA
    Posts
    148
    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. : (

    HTML Code:
    <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):

    HTML Code:
    #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 }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles