A: 

EDIT 2

I'd say these guys are the culprits

body.template table.listview th, table.gridview th, table.detailstable th, body.template table.listview td, table.gridview td, table.detailstable td
{
}

body.template table.listview td, table.gridview td, table.detailstable td
{
}

They specifiy a style to be applied to all <td>'s below a table with the class names listview, detailstable & gridview. The problem is they'll be inherited by sub tables as well

You could try, creating a second set of those styles but change them from

table.listview td

to

table.listview td table td

and unset any styles that have been applied. that'll override the styles in the nested tables created by the Calendar Extender

EDIT

Ok, It's hard to tell without seeing the entire StyleSheet for the DynamicDataSite Table, but have a look to see if the CSS For that table is specified using

Table
{
   //...
}
TD
{
   //...
}

Or using specific .classnames or #Ids

If its the former, you'll need to do some CSS Gymnastics to override the styles for nested tables to undo the styles applied to the main table. e.g.

//Top Level Tables
table td
{
    color: Red;
}

//Nested Tables
table td table td
{
    color: Blue
}

ORIGINAL

Try putting the CalendarExtender outside of the table that contains it's target control. By the looks of it, the <td>'s in the picker are inheriting the parent table CSS.

Eoin Campbell
Agreed - but this being a dynamic data site, I don't control out the field template is rendered.
RSolberg
Can you post the ASPX for your control where the Extender is inserted into the field template ?
Eoin Campbell
Just added the CSS for the tables.
RSolberg
+2  A: 

Another solution is to override those styles with another named style. The new style would need to appear after the style for the table noted above, within the .css file itself. (order of precedence for css is where it appears in the .css file...) Having a specific style for that control would prevent other styles from doing the same thing in the future.

I wrote this style, placed it at the end of the Site.css file and wrapped my entire "DateTime_Edit" FieldTemplate Contorl in it:

.DateTime_Edit
{
    white-space: nowrap !important;
}
.DateTime_Edit table
{
    border: solid 0 #FFFFFF !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.DateTime_Edit table tr td
{
    border: solid 0 #FFFFFF !important;
    background-color: #FFFFFF !important;
    padding: 0 !important;
    margin: 0 !important;
}

Edit: Added background-color to the 'td'. Added !important to everything (may not be needed)

Hopefully the default Site.css file will be updated in subsequent releases.

Aaron Hoffman
This worked for one of the areas the date picker is deployed. I've added further comments above on the second area I'm seeing an issue.
RSolberg
Further explanation - when the picker is rendered directly into a normal table, this works, but when its in a ListView, it doesn't.
RSolberg
in your code above you shouldn't need the "table.listview" entires. If the .DateTime_Edit style is at the end of the .css file, and wrapped around the entire FieldTemplate control, it should override the other css (unless something else has !Important next to it which I don't see by default). Try the modified css above. If that doesn't work, write the css inline using style="".
Aaron Hoffman
A: 

You may get a clue on how to solve your problem by looking at this post: http://stackoverflow.com/questions/773933/css-overriding-styles-on-nested-elements/774016.

knut
Unfortunately, 99% of my users are IE6
RSolberg
A: 

The fix for this issue is in the on DD Preview project here and is called AjaxToolkitFixes.css and is in the root of the website.

Just copy to the root of your site and add a reference in your Site.Master file.

Wizzard