Sign in to follow this  

[web] CSS - some properties not inheriting

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

If you intended to correct an error in the post then please contact us.

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 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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
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 this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites

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

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this