applying padding after using css reset

Question

As it turns out I don't know CSS.

I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)

I have a table with this style

table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}

but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?

Thanks.

EDIT

This is my table

<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
            <td class="rpt_stroke" style="width: 280px">&nbsp;</td>
        </tr>
    </tbody>
</table>

Answer 1

Take a look at the last line in his css:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.

Try putting padding on the cells themselves or add a margin to the table.

Answer 2

Works fine for me. Did you declare a DocType?

Answer 3

You have to apply the style to the TD's not the table.

    table.home_right_top td

Answer 4

The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:

all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.