css not working in table "td" , but it works for "th"....what's going on?

Question

I've been coding a webapp for some time now and all the layout, css was working fine. Some time in the last week or so I made some kind of a change that I absolutely have no idea what I changed that is causing this problem and I've tried reversing the code with no luck. I have figured out however that the problem goes away if I use a <th> in place of a <td> in my tables. Problem is there are thousands of lines of code that have to be modified and I'm using the tables to display my columnar data read out of the db. If I can avoid having to change the <td> tags to <th> I will be really happy.

I use css to style the column names. Can anyone explain why the following now fails when it has worked fine for 8 months now. I know the code obviously changed somewhere, but I'm clueless where to look....perhaps your explanation will give me an idea where to look in my code.

This used to work but now displays only grey text in the FIELD_name area: <td class="FIELD_name">Field Name:</td><td class="FIELD_text">small grey text here"</td>

If I do this I get the proper display (using "th" instead of "td"): <th class="FIELD_name">Field Name:</th><th class="FIELD_text">small grey text here"</th>

or if I use a span tag like this it also works: <td><span class="FIELD_name">Field Name:</span></td><td class="FIELD_text">small grey text here"</td>

Here's the CSS:

.FIELD_name {
  font-family: Tahoma;
  font-size: 11px;
  font-style: normal;
  color: #135386;
  font-weight: bold;
}
.FIELD_text {
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  font-style: normal;
  color: #666666;
  font-weight: bold;
}

I'm hoping it's just a simple code fix somewhere...your help is appreciated. thanks.

Answer 1

The correct answer is to calculate the specificity of the element's styles and find out what is overriding it.

The pragmatic answer is to install firebug on firefox and find out where the definition that is over riding the one you want appears.

The lazy answer is to use !important after each definition in the style sheet for this element.

Answer 2

Guys, thanks for the tips. I found the culprit. I'm using a jquery plugin called tablesorter for sorting my tables. Yesterday I wanted to be able to center my tables inside a div so I implemented the following CSS so that my tables would center properly (which worked):

table { margin-left:auto; margin-right:auto; }

However, this css was found in the tablesorter plugin css file which is where the problem is for the "td".

table.tablesorter tbody td { color: #3D3D3D; padding: 4px; /*background-color: #FFF;*/ vertical-align: top; }

I'm not a css expert, basically I've hacked my way through things over the years so some basic concepts I know I'm lacking on, but could you explain what is going on with the way tablesorter has implemneted this and how I might go about changing the way I'm doing the css so it doesn't override things?

And if you know of a good to-the-point tutorial for helping me get a better hold on css...I'll take any recommendations.