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.
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.