# [web] CSS - some properties not inheriting

This topic is 3251 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Heya, I'm having a bit of trouble. I have a div with a table in it. The div has an id, and the table cells have a class. Here is the HTML:
        <div id='login_content'>

<p>
Blah blah blah! Blah blah blah!
</p>

<form>
<table>

<tr>
<td><input type='text' size='16' value='guest' /></td>
</tr>

<tr>
</tr>

<tr>
<td></td>
</tr>

</table>

</form>

</div>


And here are my CSS definitions:
        <style type='text/css'>

width: 40em;
font-family: verdana, sans-serif;
font-size: 18pt;
margin-left: 10em;
}

.label {
text-align: right;
font-size: 1em;
}

</style>


I was expecting the div's properties to all trickle down to the td's with the label class, but only one of them did (the font-family): This happens with both Firefox and Safari. I could easily fix this by adding those properties to the label class definition, but I'm really curious to know what it is that I'm misunderstanding.

##### Share on other sites
Quote:
 Original post by CDPropI was expecting the div's properties to all trickle down to the td's with the label class, but only one of them did (the font-family)

Not all CSS properties can be inherited. Font-family and font-size can, but width and margin cannot.

For a complete list of which properties can be inherited, refer to the "Inherited?" column of this property table.

##### Share on other sites
Oddly enough, it's the font-size property that isn't being inherited. Also, I tested it with the color property, and that isn't inheriting either.

##### Share on other sites
Quote:
 Original post by CDPropOddly enough, it's the font-size property that isn't being inherited. Also, I tested it with the color property, and that isn't inheriting either.

Font-size should be inheriting, but notice that you're setting an 18pt font in the parent div and then 1em in the child label. Inheritance in CSS works by taking the parent value and using that as the default value for all children, which the child components then individually extend from. So in your setup, the initial child label's font-size value is 18pt from the parent inheritance, but then it is transformed to 1em (on an 18pt line height), which is 18pt. If you had 2em on the child, the child's font-size value would be 36pt. If you had 0.5em on the child, the font-size would be 9pt. That make sense?

##### Share on other sites
That was an incidental mistake that I wish I had not made. >_<

lol.

I put 1em there because one website said that it might work as a fix. I didn't think it would, but I tried it just in case. But even without the 1em there, the font-size still doesn't inherit. Neither does color.

##### Share on other sites
Quote:
 Original post by CDPropBut even without the 1em there, the font-size still doesn't inherit. Neither does color.

Okay, I see the problem. Mozilla-based browsers treat inheritance differently when it comes to tables in order to be compliant with older web pages. For Mozilla browsers you will need to specify the "inherit" attribute for each of the CSS properties that you want your table to inherit from the parent div.

To force your table to inherit font-size and color, you will need to add a class like the following to your table:

.table_inherit{    color: inherit;    font-size: inherit;}...<table class='table_inherit'>

This change does not, however, work in IE 7 or earlier browsers because they only support the "inherit" value for direction, visibility and font-family. There does not appear to be a workaround for this issue other than copying any relevant CSS code into the desired child elements.

[Edited by - Omega147 on August 20, 2009 3:18:32 PM]

Whoa! lol

thanks so much!

1. 1
Rutin
24
2. 2
3. 3
JoeJ
18
4. 4
5. 5

• 38
• 23
• 13
• 13
• 17
• ### Forum Statistics

• Total Topics
631710
• Total Posts
3001845
×

## Important Information

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!