ASP.NET - Ajax Calendar Extender CSS Inheriting From Table

Question

I have an asp table with headers, I also have rows and on one of the rows I have a cell with a n Ajax calender extender attached to a text box.

Unfortunately when I open the calender extender it doesn't display correctly and the padding is much too big on it.

I investigated which CSS styles were being applied and it seems to be inheriting the padding from the table.

Here is the css from the table :

.accountorderstbl {font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;width:100%;text-align:center;border-collapse:collapse;}
.accountorderstbl th{width:20%;font-size:13px;font-weight:normal;border-bottom:1px solid #fff;color:#039;padding:8px;background:url("Images/pattern-head.png");}

.accountorderstbl tfoot td{width:20%;font-size:13px;font-weight:normal;border-bottom:1px solid #fff;color:#039;padding:4px;background:url("Images/pattern-head.png");}

.accountorderstbl tr.unselected td{width:20%;border-bottom:1px solid #fff;color:#669;border-top:1px solid transparent;padding:8px;background:url("Images/pattern_blue.png");}
.accountorderstbl tr.selected td{width:20%;border-bottom:1px solid #fff;color:#669;border-top:1px solid transparent;padding:8px;background:#E3E3F1;}

.accountorderstbl tbody tr.unselected:hover td{color:#339;background:#fff;}
.accountorderstbl tbody tr.selected:hover td{}

.accountorderstbl a{ text-decoration: none;color:#669;font-weight:bold;}

I thought adding this line of css would fix it

.ajax__calendar_container td { padding:0; margin:0;}

but when I examine the css being applied I can see that this one also is getting override by .accountorderstbl tr.unselected td which has padding set to 8px

Can anyone help?

Answer 1

try adding !important to the end of your css

.ajax__calendar_container td { padding:0 !important; margin:0 !important; }

!important is an override switch for css. Smashing Magazine has an article about it here