Can't override CSS padding

I've got the following CSS that is being applied to tables:

.myTable
{
  width: 99%;
  border-collapse:collapse;
  word-wrap:break-word;
  border:1px solid #28282C;
  background-color: #F7F6F3;
}

.myTable td
{    
  padding: 16px 4px 0px 4px;
  text-align:left;
  ve开发者_StackOverflow中文版rtical-align:top;    
}

Because I don't want that padding applied to form elements in my tables, I also have this CSS:

.myTable td input
{    
  padding:0px 0px 0px 0px !important;     
}

However, this doesn't work. The padding stubbornly stays put, UNLESS I put in a larger padding. For example, if I do this:

.myTable td input
{    
  padding:50px 50px 50px 50px !important;     
}

Then the form elements are correctly overridden with the newer, gigantic padding. What am I missing here? How do I override/cancel padding on child elements using CSS?

Edit: I figured it out after digging through the rendered HTML. The input elements were fine, the cause was that ASP.NET renders each checkbox in a checkboxlist in its own TD, which was receiving the padding from the stylesheet and making it seem like the inputs were being padded. Thanks everyone

that's working exactly as you typed it. You have applied padding to the TD. That applies padding to every TD regardless of what's in it.

Your second style for the input would be in addition to the padding set on the TD. So it's not over-writing anything.

You could try applying negative margin to the INPUT to counter the padding in the parent TD. Not sure if all browsers will like that or not.

Alternatively, give the TD's that have the input their own class:

<td class="withInput">

Then you can use this selector in your css:

td.withInput {padding: 0px;}

Nothing is wrong with your code. You can even remove the CSS for the INPUT. INPUT will not inherit padding values from parent TD. Show us the page, so we can help you.

The only issue you will have is with IE7 and older. In that case use NEGATIVE MARGIN for your INPUT elements.

Hacks for IE7 and IE6

input{
*margin: -2px;
_margin: -2px;
}