Back to General and Gameplay Programming

[web] CSS - some properties not inheriting

General and Gameplay Programming Programming

Started by CDProp August 17, 2009 08:28 PM

5 comments, last by CDProp 14 years, 8 months ago

CDProp

1,451

Author

August 17, 2009 08:28 PM

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 class='label'>Username: </td>
                        <td><input type='text' size='16' value='guest' /></td>
                    </tr>
                    
                    <tr>
                        <td class='label'>Password: </td>
                        <td><input type='password' size='16' value='pass' /></td>
                    </tr>
                    
                    <tr>
                        <td></td>
                        <td><input type='submit' value='Sign In'></td>
                    </tr>
                    
                </table>
                
            </form>
        
        </div>

And here are my CSS definitions:


        <style type='text/css'>
    
            #login_content {
                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.

Omega147

536

August 18, 2009 02:47 PM

Quote:Original post by CDProp
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)

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.

Urban Space Squirrels

CDProp

1,451

Author

August 18, 2009 07:48 PM

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.

Omega147

536

August 19, 2009 11:45 PM

Quote:Original post by CDProp
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.

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?

Urban Space Squirrels

CDProp

1,451

Author

August 20, 2009 09:44 AM

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.

Omega147

536

August 20, 2009 03:18 PM

Quote:Original post by CDProp
But 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.

You can read more about the Mozilla inheritance issue here.

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

Urban Space Squirrels

CDProp

1,451

Author

August 21, 2009 05:47 PM

Whoa! lol

thanks so much!

[web] CSS - some properties not inheriting

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

[web] CSS - some properties not inheriting

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines