The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Inheritance question
Eddie
post May 4 2017, 02:55 PM
Post #1





Group: Members
Posts: 4
Joined: 4-May 17
Member No.: 26,395



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2017, 03:14 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,767
Joined: 9-August 06
Member No.: 6



Because padding isn't inherited. That is, it never is. wink.gif
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-2011060...ndant-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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 4 2017, 04:23 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2017, 04:40 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,767
Joined: 9-August 06
Member No.: 6



bgcolor (for TR) and height (for TD) are only allowed in HTML 4.01 Transitional. Move it all to CSS, I say.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Eddie
post May 4 2017, 07:30 PM
Post #5





Group: Members
Posts: 4
Joined: 4-May 17
Member No.: 26,395



Thanks for the quick input, I really appreciate it and I'll heed your advice.
Cheers,
Ed
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st November 2017 - 03:22 AM