TD style override

I have two styles for my table tds:

.HomeMasterPageTable td
{
   padding: 0px !important;
}

td
{
    vertical-align: top;
    padding: 3px 3px 3px 3px !important;
}

Open in new window


The first is for a table on the master page which must not have any padding. It wraps the body content throughout the site. But the body content contains tables that must have the td padding as shown above.

However, when the tables inside the master page table are rendered, they also do not have padding.

How do I tell the system that only the table with the class name of "HomeMasterPageTable " should have no padding. But every other table needs to have the padding, even if they are tables inside of the HomeMasterPageTable  table?

thanks!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
 
GaryCommented:
CSS inherits/overrides. Your code for the td is overriding the HomeMasterPageTable class, plus you declared both styles as important - remove the !important from the td class or  structure the css properly

td
{
    vertical-align: top;
    padding: 3px 3px 3px 3px;
}

.HomeMasterPageTable td
{
   padding: 0px;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.