CODEWITHSUNDEEP
csshtml
omer bach
omer bach

Reputation: 2405

How to make child div elements affected by div css rules?

I have an html which has a main div.

<div id="main_container">

in it, I have a table, which each row has a button in it:

  <tr>
    <td>open2</td>
    <td>CPI</td>
    ...
    <td class="left_border">
        <button>x</button>
    </td>
    <td class="left_border">
        <button>p</button>
    </td>
    <td class="left_border">
        <button>k</button>
    </td>
</tr>

I have a css rule applied on the div:

#main_container {
    font-size: 9px;
    font-family: tahoma;
    border: solid 3px rgba(78, 70, 70, 0.81);    
    display: inline-block;
}

This rule doesn't seem to apply on the buttons' font-size. What am I missing here?

Here is a fiddle with the full html + css.

http://jsfiddle.net/9YZuw/11/

Note: I have updated the fiddle so now there is no specific css rule for the button, however its font size is still not derived from its parent div.

Thanks

Upvotes: 0

Views: 328

Answers (2)

labtoy
labtoy

Reputation: 198

it is because the button-element (along with input, select and textarea) does not inherit certain attributes, and font-size is one of them.

this css will sort it out:

button{font-size:inherit;}

Upvotes: 2

Sasidharan
Sasidharan

Reputation: 3750

CSS

#main_container {
    font-size: 9px;
    font-family: tahoma;
    border: solid 3px rgba(78, 70, 70, 0.81);    
    display: inline-block;
}

Remove this css or remove font property here

button {
    padding: 0px;
    width: 20px;
    font-size: 8px;
    font-weight: bold;
}

and also try using em for font size..

Upvotes: 0

Related Questions