12 Replies Latest reply on Jul 25, 2012 4:18 AM by NessaFrankling

    table css problems with mouse over and highlighted cells

    NessaFrankling

      Can anyone work out from what I have done so far how to get the background of the table cell to highlight a certain colour say orange for instance when you mouse over.

      This is what I have so far for the CSS and the page I am working on is http://62.6.176.22/products/leaflets.aspx?Id=145399&Key=F8FA69A7-4AC5-4986-97F3-6C8C9520FA 87 using this css so far I have increased the size of the cells but when I set the mouse over for the background it doesn't highlight the whole cell it only seems to highligh part of it. Its not currently using this css by the way its using the old version.

       

      .GridviewTable{

                width: 700px !important;

                text-align:center !important;

                margin-left:auto;

                margin-right:auto;

                border: 3px solid #FFF;

      }

         

      .GridviewTable th {

                background-color: #86cee0;

                color: #FFFFFF !important;

                font-size:15px !important;

                font-weight:bold !important;

                border: 3px solid #FFF;

                height:20px;

                width:150px;

                padding-top: 7px;

                padding-right: 7px;

                padding-bottom: 7px;

                padding-left: 7px;

      }

         

      .GridviewTable td {

                font-weight:bold !important;

                font-size: 17px !important;

                color:#666;

                background-color:#999; /* background color for Quantity column light grayish */

                /* background-color:#CC66FF;  do not declare bg color here because it will overwrite the rest */

                border: 3px solid #FFF;

                white-space: normal;

                padding-top:10px;

                padding-bottom:10px;

       

      }

       

      .GridviewTable td a {

         font-weight:normal !important;

                font-size: 16px !important;

                letter-spacing:-1px;

        

      }

       

       

       

       

         

      .GridviewTable tr  {

                font-size:25px;

       

                          /* any color or background-color set here will override

                          the .AlternatingRow property so it's best not to use it

                          if you want alternating rows to be different */

          }

         

      .GridviewTable td a:hover {

                color:#000000;

                background:none;

                display:block;

                text-decoration:none !important;

                font-weight:bold !important;

       

       

      }

         

      .GridviewTable tr:hover {

                          /* any color or background-color set here will override

                          the .AlternatingRow property so it's best not to use it

                          if you want alternating rows to be different */

      }

       

       

      .GridForPricesHeader  {

          padding: 2px 5px 2px 5px;

      }

       

       

       

      .fleft {

         float:left;

      }

      .white {

         color:#fff;

       

       

      .customSizeRecalculate{

                width: 700px !important;

                font-size:15px;

       

       

       

      }  

       

       

      .customQuantity {

                margin-left:7px;

                margin-top:3px;

                margin-bottom:0px;

       

                }

       

      #ctl00_CenterContent_lblGridExplanation {font-size:15px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}