Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Inheritance question

Posted by: Eddie May 4 2017, 02:55 PM

Hi,
I have a problem with <tr> and <td> inheritance.
Here are the details:

HTML code:
<tr bgcolor="#FFFFCB" align="left" valign="middle" class="c19">
<td height="30">Name</td>
<td>phone</td>
<td>email</td>
</tr>

css code for class="c19":
.c19 { color: #527531; font-family: verdana,tahoma,arial,helvetica; font-size: 11px; padding-left: 5px; }

The problem is that the <td> cells do not inherit the padding-left from <tr> but they inherit everything else, font color, size, font family.
Can someone tell me why that is?
Thanks,
Ed

Posted by: pandy May 4 2017, 03:14 PM

Because padding isn't inherited. That is, it never is.
https://www.w3.org/TR/CSS2/box.html#propdef-padding-left
Only some properties are inherited. It would be odd if padding and margin were if you consider how that would effect nested elements.
If margin was inherited, a margin on the DIV in the below example would also result in a margin on the P and the EM, something one wouldn't want in most cases, and you would have to specify null margins for every nested element.

HTML

<div>
<p>
One <em>two</em>three</p>
</div>

If you change the selector to the below it will work as you want it to.

CODE

.c19 td { color: #527531; font-family: verdana,tahoma,arial,helvetica; font-size: 11px; padding-left: 5px; }

If you don't know, that's called a contextual or descendant selector and it will match any TD that's contained in an element with the class 'c19'.
https://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#descendant-selectors

I would move the HTML attributes you use to CSS too. And it's good practice to finish a font list with a generic font family, sans-serif in your case.

Posted by: Christian J May 4 2017, 04:23 PM

As a sidenote, it's safer and more practical to specify both color and background in the same place (in the CSS), instead of having one as a CSS property and the other as an HTML attribute. Also note that the BGCOLOR, ALIGN and VALIGN attributes are removed in HTML5 (but they're still valid in HTML4).

Posted by: pandy May 4 2017, 04:40 PM

bgcolor (for TR) and height (for TD) are only allowed in HTML 4.01 Transitional. Move it all to CSS, I say.

Posted by: Eddie May 4 2017, 07:30 PM

Thanks for the quick input, I really appreciate it and I'll heed your advice.
Cheers,
Ed