[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS style propagation

Posted on 2004-11-20
4
Medium Priority
?
492 Views
Last Modified: 2012-05-05
I have the following HTML

================ HTML ===================
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">

   <h2>Corners</h2>
   <p>This is a sample</p>
   <p>Of a rounded box</p>
   <p>With funny corners</p>

</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
================ HTML ===================


And the following CSS

================ CSS ====================

/* START - first example */

 /* set millions of background images */
.rbroundbox { background: url(images/c00.gif) repeat; }
.rbtop div  { background: url(images/c11.gif) no-repeat top left; }
.rbtop      { background: url(images/c12.gif) no-repeat top right; }
.rbbot div  { background: url(images/c21.gif) no-repeat bottom left; }
.rbbot      { background: url(images/c22.gif) no-repeat bottom right; }

 /* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
      width: 100%;
      height: 7px;
      font-size: 1px;
}
.rbcontent  { margin: 0 7px; }
.rbroundbox { width: 60%; align: left;  margin: 1em; }

/*  END  - first example */

h1 { font-size: 1.7em; color : #4A627A;}
h2 { font-size: 1.4em; color : #4A627A;}
p { font-size: 1em; }


h1 { padding: 0; margin: 0 0 0px 0;   }
h2 { padding: 0; margin: 0 0 10px 0; border-bottom: 1px solid #4A627A;  }
p  { padding: 0; margin: 10px 0 0 0; }


#realcontent {
      border: 1px solid #666;
      background: #efefef;
      padding: 1em;
      margin: 0 300px 0 50px;
}

#realcontent p td tr {
      padding: 0em;
      margin: 0;
}

=======================================

If i want to include a table in my round corner box like this :

================ HTML WITH TABLE ===================
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">

   <h2>Corners</h2>
   <p>This is a sample</p>
   <p>Of a rounded box</p>
   <p>With funny corners</p>

   <table>
      <tr>
           <td>
                  HOW TO HAVE THE SAME FONT AS <h2> AND <P>
            </td>
       </tr>
     </table>
   

</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
================ HTML WITH TABLE ===================




=========== QUESTION ==============================

The format of the text in the TABLE is the default text of the body (font, size, etc...)
but i want to have the same format as the container






================================================
0
Comment
Question by:eeolivier
  • 2
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 600 total points
ID: 12635582
h1 { font-size: 1.7em; color : #4A627A;}
h2, .h2cls { font-size: 1.4em; color : #4A627A;}
p, .pcls { font-size: 1em; }


<table>
      <tr>
           <td class="h2cls">
                  HOW TO HAVE THE SAME FONT AS <span class="pcls"> AND </span>
            </td>
       </tr>
     </table>

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12656280
Would you care to explain the insulting grade before I post a complaint about the way you have ignored the guidelines, or should I hand the matter over to a mod?

Cd&
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month17 days, 23 hours left to enroll

829 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