Skip to main content
B
BrianO
Inspiring
December 1, 2008
Question

CF8.0.1 cfgrid and cfinput datefield CSS conflict

  • December 1, 2008
  • 1 reply
  • 1126 views
My client defines the following CSS in a template:

table{background-color:#F5F5F5;}
tr{background-color:#F5F5F5;}
td{background-color:#F5F5F5;}
th {background-color: #587498;color: #F5F5F5;}

I am allowed to add CSS to overwrite it in a CSS call after this. My CSS essentially includes that found in the Adobe-provided CFIDE/scripts/ajax/ext/resources/css/ext-all.css. However the table, tr, td and th values from earlier in the code is not being over-ridden by the ext-all.css related to cfgrid and the cfinput datefield datepicker, making it look unusable in IE7 and FF3, but I need it to work. My understanding of CSS is not at a deep level, but I know that CSS defined later should override that found earlier and that the use of !important can also increase the priority. I also narrowed my problem to the CSS above. It is unclear to me what in ext-all.css needs to be changed related to the cfgrid and the cfinput datefield. Anyone know what CSS changes I need to make?
This topic has been closed for replies.

1 reply

N
Newsgroup_User
Inspiring
December 1, 2008
install firebug for firefox.
inspect the css of the cfgrid and the datepicker.
add appropriate css declarations in the page to over-ride or enforce
whatever styles you need to change.

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/
B
BrianOAuthor
Inspiring
December 1, 2008
Azadi,
Thanks for the reply. I use Firebug, but the cfgrid x-grid CSS still has me perplexed.

I did try again and resolved the datepicker CSS, which actually was coming from the yui.css. The code I used here to override the template CSS was:
th.calhead, th.calweekdaycell {
background-color: #FFF;
color: #003;
}
td.calcell {
background-color: #FFF;
}

Regarding the cfgrid CSS. It is only 3 rules messing with the look of the cfgrid x-grid rules as follows:

table{background-color:#F5F5F5;}
tr{background-color:#F5F5F5;}
td{background-color:#F5F5F5;}

Specifically the backgrounds for the top and bottom toolbars, the grid header, columns and rows are affected. Looks like it includes x-toolbar, x-grid-hd-row, x-grid-body, x-grid-row, x-grid-bottombar, x-grid-col x-grid-td, x-grid-cell from CFIDE/scripts/ajax/ext/resources/css/ext-all.css, but it is confusing and I'm unclear how to get the look that is there when I hide the above template rules.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices