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.