2 Replies Latest reply on Dec 1, 2008 11:43 AM by BrianO

    CF8.0.1 cfgrid and cfinput datefield CSS conflict

    BrianO Level 1
      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?
        • 1. Re: CF8.0.1 cfgrid and cfinput datefield CSS conflict
          Level 7
          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/
          • 2. Re: CF8.0.1 cfgrid and cfinput datefield CSS conflict
            BrianO Level 1
            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.