Having trouble with table rows in IE6

[iamba]

Does anyone have idea why formatting such as background-color and border-top would work for <td> classes but not <tr> classes in IE6? They work in firefox, just not IE. Font colors work in both tr and td in both browsers, so I know that the tags are having some effect on the contents of the cell, but not the cell itself?

tr.productRow{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
	/*ignored in ie, but works in firefox*/
	background-color: #fff;
}
td.productCell{
	padding-top: 2px;
	padding-bottom: 2px;
	border-top: 1px solid #69C;
	border-bottom: 1px solid #69C;
/*I have experimented with no formatting in this cell, specifying
the background as transparant, etc but nothing seems to allow the
formatting from the table row for background or border info to 
display.*/
	background: transparent;
}

Anyone have any idea? I've been struggling with this for almost two days now.

[jscheuer1]

It is a known bug (from a standards compliance point of view) in IE6. However, you can simply apply the style(s) you want to the td's. One economical way to do that is via this selector:

tr.productRow td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
	background-color: #fff;
}

This should work for both browsers and only requires that the class name be set for each row.

[maryc]

I noticed you only have 3 color #s in your code. Did you try using #FFFFFF instead of #FFF? In using colors you would need to use 6 #s or combination of letters and #s. Could it be the problem? Just try that and see.

[mwinter]

Did you try using #FFFFFF instead of #FFF?

They are identical.

The three digit colour notation is expanded using digit replication. That is, #bad is the same as #bbaadd.

Mike