0

I have an asp.net gridview. i have applied a style to the main headings bar using shading. This works fine in IE9 but it doesnt use the shading in Chrome. I use the exact same shading for div etc in my webapplication and both Chrome and IE9 work fine. So why does Chrome not like my CSS? (specifically the 3 shading lines in .mGrid th shown below)

thanks Damo

HTML Code

<asp:GridView ID="GridViewMain" OnRowDataBound="RowDataBound" OnPageIndexChanging="gridView_PageIndexChanging"
                                        runat="server"  AllowPaging="True" PageSize="50" PagerSettings-Position="TopAndBottom"
                                        CssClass="mGrid"
                                        PagerStyle-CssClass="pgr"
                                        AlternatingRowStyle-CssClass="alt"
                                        >
                                     </asp:GridView>

CSS

/* Grids */

.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;font-family:Verdana; font-size:12px; }

.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }

.mGrid th { padding: 4px 2px; color: #000000; 
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
            background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */
            background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;         
          }

.mGrid .alt { background: #fcfcfc; }

.mGrid .pgr {background: #FFFFFF; }

.mGrid .pgr table { margin: 5px 0; }

.mGrid .pgr td { border-width: 0px; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  

.mGrid .pgr a { color: #666; text-decoration: none; }

.mGrid .pgr a:hover { color: #000; text-decoration: none; }

.mGrid tr:hover{background-color:#FFFFCC;color:white;}

/* End Grids */
Improve this question

2 Answers 2

Reset to default
1

U can use below style,

   /***** data table ******/
.dataTable{ display:table; margin:0px 0px 3px 0px; padding:0px; border: none;  border-spacing:0px; font-size:100%;   }
.noPad{ padding:0px !important; margin:0px !important;}
.dataTable tr.altRow td{ background:#EAEAEA ;}
.dataTable tr.selRow td{ background:#FFFFCC ;}
.dataTable td.middleAlign{ padding:11px !important; }
.dataTable tr.totalRow td{ background:#999999 !important;}
.dataTable th{ background: url('/_layouts/ABFSG/MF/Images/tableHdr_bg.png') left top repeat-x; margin:0px; font-size:12px; color:#000;  border-top:0px solid #D7BB00; vertical-align:middle !important; }
.dataTable th, td{ display:table-cell; padding:5px 5px 5px 7px; border:0px solid #cecece; vertical-align:middle;text-align:left; font-weight:normal;}
.dataTable td.subRow { border-top:1px solid #D7BB00;background: url('/_layouts/ABFSG/MF/Images/subRowHeader.png') left top repeat-x; height:17px; padding:2px !important; padding-left:7px !important; }
.dataTable tr.singleRow td{ padding:0px 5px 3px 5px !important;}
.withBorder td{ border:1px solid #EAEAEA;}
.dataTable td.gray{ background-color:#818181;}
.dataTable td.noPadDiv{ padding:0px !important; margin:0px !important;}
.dataTable td.vtop{  vertical-align:top;}

.sec_dataTable{display:table; margin:0px 0px 3px 0px; padding:0px; border: none;  border-spacing:0px; font-size:100%;}
.sec_dataTable tr th{background:#FFFAEA ; margin:0px; font-size:11px; color:#000;  display:table-cell; padding:5px 5px 5px 7px; border:1px solid #DDDDDD; vertical-align:middle; text-align:left; font-weight:normal;}
.sec_dataTable tr td{ display:table-cell; padding:5px 5px 5px 7px; border:1px solid #DDDDDD; vertical-align:middle; text-align:left; font-weight:normal;}
.sec_dataTable tr.altRow td{ background:#EAEAEA !important;}

.dataTableBrd{display:table; margin:0px 0px 3px 0px; padding:0px; border: none;  border-spacing:0px; font-size:100%;}
.dataTableBrd tr th{ background: url('/_layouts/ABFSG/MF/Images/tableHdr_bg.png') left top repeat-x;border:1px solid #EBBA05; margin:0px; font-size:11px; color:#000;padding:5px 5px 5px 7px;  border-top:0px solid #D7BB00; vertical-align:middle !important; font-weight:normal;}
.dataTableBrd tr td{ display:table-cell; padding:5px 5px 5px 7px; border:1px solid #DDDDDD; vertical-align:middle; text-align:left; font-weight:normal;}
.dataTableBrd tr.altRow td{ background:#EAEAEA !important;}


.globalNav{background:url(/_layouts/ABFSG/MF/Images/globalNav_bg.png) left top repeat-x; margin:0px; padding:0px; height:22px; float:left;}
.globalNav ul{ margin:0px; padding:0px; list-style:none;}
.globalNav li{ float:left;}
.globalNav li a{ display:block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:4px 10px 4px 10px;}
.globalNav li.sep{ display:block; background:url('/_layouts/ABFSG/MF/Images/globalNav_sep.png') left top no-repeat; width:1px; height:22px;}
.globalNav li.sel a{ display:block; background:url(/_layouts/ABFSG/MF/Images/globalNav_selbg.png) top left repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FECB02;}
.globalNav li.sel a:hover{ cursor:default;}
.globalNav li.first{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_unselFirL.png) left top no-repeat; margin:0px; padding:0px;}
.globalNav li.first a{ display:block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:4px 10px 4px 10px;}
.globalNav li.firstsel{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_selFirL.png) left top no-repeat; margin:0px; padding:0px;}
.globalNav li.firstsel a{ display:block; background:url(/_layouts/ABFSG/MF/Images/globalNav_selbg.png) top left repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FECB02; margin:0px 0px 0px 5px; padding:4px 10px 4px 5px;}
.globalNav li.firstsel a:hover{ cursor:default;}
.globalNav li.last{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_unselLastL.png) right top no-repeat; margin:0px; padding:0px;}
.globalNav li.last a{ display:block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:4px 10px 4px 10px;}
.globalNav li.lastsel{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_selLastL.png) right top no-repeat; margin:0px; padding:0px;}
.globalNav li.lastsel a{ display:block; background:url(/_layouts/ABFSG/MF/Images/globalNav_selbg.png) top left repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FECB02; margin:0px 4px 0px 0px; padding:4px 5px 4px 10px;}
.globalNav li.lastsel a:hover{ cursor:default;}

.grayNav ul{ margin:0px; padding:0px;}
.grayNav li{ float:left; list-style:none;}
.grayNav li a{ display:block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#6c7f85; margin:0px; padding:0px 2px; }
.grayNav li.sel a{ display:block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:0px 2px; }
.grayNav li.sel a:hover{ cursor:default; }
.grayNav li.sep{ color:#C8C8C8; font-weight:bold; margin:0 7px 0 7px;}

.header h1{ font-size:15px; color:#000; font-weight:bold; float:left;}
.btnSearchTopPad{ margin-top:0px; *margin-top:1px;}

.arrowPlace{position:absolute; margin-top:-7px;}
.solutionTxt{ padding:5px 0px; width:100%;width:97%\9; text-align:center; color:#000!important; float:left;}
.blkLinkText{ padding:5px 0px; width:100%;width:97%\9; color:#000!important; float:left;}
.largeFont{ font-size:15px; font-weight:bold;}
/*.pagination_bg{background:#D0D0D0; float:left; -moz-border-radius: 3px;-webkit-border-radius: 3px;}*/
.pagination_sel{ padding:2px 5px; float:left;}
.pagination_sel a{  cursor:default;}
.pagination_unsel{ padding:2px 5px; float:left;}

.testimonialBox{ background: #fff url(/_layouts/ABFSG/MF/Images/header_boxBG.png) bottom left repeat-x;}
.testimonialBoxShadow{ background: #fff url(/_layouts/ABFSG/MF/Images/header_boxSDO.png) center no-repeat; height: 10px;}

.testimonial{ position:relative; border:1px solid #9F9F9F; padding:0px!important; float:left; border-left:none; border-top:none; border-bottom:none;}
.testimonialCont{position:absolute; height: 18px; width: 18px; background-position: -47px 0px;}
.testimonial .bdrT{ background:url('/_layouts/ABFSG/MF/Images/testmonial_Top.png') left top repeat-x; margin-left:25px; padding:3px 0 0 0; font-size:3px;}
.testimonial .bdrB{ background:url('/_layouts/ABFSG/MF/Images/testmonial_Top.png') left top repeat-x;  margin-left:25px; padding:0 0 3px 0; height:1px; }
.testimonial .bdrL{background: url("/_layouts/ABFSG/MF/Images/testmonial_Aro.png") no-repeat scroll left center transparent; margin: 0;padding: 0 0 0 22px;}
.tmTL{top: -2px; left:19px; clip: rect(auto 8px 8px auto);}
.tmTR{top: -2px; right: -5px; clip: rect(auto auto 8px 8px); float: right;}
.tmBL{bottom: -1px;left: 19px; clip: rect(8px 8px auto auto); }
.tmBR{bottom: -1px;right: -5px;clip: rect(8px auto auto 8px); }

.os_banner1{ margin-left:-10px; padding:103px 0px 4px 0px; background:url(/_layouts/ABFSG/MF/Images/our_solutions_banner1.png) left top no-repeat; width:454px; height:115px;}
.os_banner2{ margin:-4px 0px 0px -10px; padding:103px 0px 4px 0px; background:url(/_layouts/ABFSG/MF/Images/ourSolutions_banner2.jpg) left top no-repeat; width:452; height:111px; width: 456px;}

.os_banner_grp{ margin:-4px 0px 0px -10px; padding:103px 0px 0px 0px; background:url(/_layouts/ABFSG/MF/Images/group_oursolutions.png) left top no-repeat; width:452; height:115px; width: 456px;}
.banner1Cont{ margin:-70px 0 0 250px;}
.banner2Cont{ margin:-80px 0 0 205px;}
h1.privaFont{font-size:16px; color:#000; font-family:PrivaThreeItalicPro,Verdana, Arial; letter-spacing:-1px;}
.os_bannerBG{ background: url(/_layouts/ABFSG/MF/Images/our_solutions_bg.png) top left repeat-x; padding:7px; height:92px; width:442px;}

.headerBox_smallShadow{ background: #fff url(/_layouts/ABFSG/MF/Images/header_box_smallSDO.png) center top no-repeat; height:6px; padding:0px; margin:0px; float:left;}

#wealth_layer,#fundsLayer,#orgFundsLayer,#rollOver1,#rollOver2,#wealthPro_layer,#adityaB_layer,#mutual_layer,#Purchase_step1,#equity,#funds{padding-top:10px;   position:absolute; display:none; z-index:10;}

.portlet_01 .bdrRt{background-image:url(/_layouts/ABFSG/MF/Images/purple_dropdwn_right.png);background-position:right 5px; background-repeat:no-repeat; margin-bottom:0px;}
.portlet_01 .bdrLt{background-image:url(/_layouts/ABFSG/MF/Images/purple_dropdwn_left.png);background-position:left 5px; background-repeat:no-repeat; margin-bottom:0px;}

.borderBottHeader{ border-bottom:1px solid #D6D6D6; width:449px; margin-left:3px; margin-top:-0px; *margin-top:-10px;}

.moverArr{background-image:url(/_layouts/ABFSG/MF/Images/solutionSelArr.png); background-position:absolute;  height:9px;                width:113px;  margin-top:-8px; *margin-top:-8px; margin-left:5px; z-index:99;}

#breadCrumbs a{ font-weight:bold;}
.star_icon{width:16px; height:15px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-34px -113px; background-repeat:no-repeat; padding:0px;}
.ratingFull_icon{width:10px; height:11px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-54px -113px; background-repeat:no-repeat; padding:0px;}
.ratingHalf_icon{width:9px; height:11px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-67px -113px; background-repeat:no-repeat; padding:0px;}
.returns_icon{width:17px; height:15px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-81px -116px; background-repeat:no-repeat; padding:0px;}
.risk_icon{width:18px; height:17px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-101px -116px; background-repeat:no-repeat; padding:0px;}
.liquidity_icon{width:16px; height:18px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-122px -116px; background-repeat:no-repeat; padding:0px;}
.investment_icon{width:16px; height:17px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-143px -116px; background-repeat:no-repeat; padding:0px;}
.awards_icon{width:15px; height:20px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-167px -113px; background-repeat:no-repeat; padding:0px;}
.vr_icon{width:12px; height:10px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-189px -118px; background-repeat:no-repeat; padding:0px;}
.botBrdr{ border-top:1px solid #FFDD00; height:0px; border-bottom:1px solid #FFF; margin:0 0px 0 -10px; padding-right:20px;}


.lightYellowBox{border: 1px solid #F6E04E; position:relative; overflow:visible;background-color:#FEFCE5;background-image:none;}
.type7 .yellowBxCrnr{background-image:url(/_layouts/ABFSG/MF/Images/sprite_icon.png);}                
.yellowBxCrnr { position:absolute; height: 12px; width: 12px; background-position:-68px 0px;}
.YTL{position: absolute;left: -1px; top: -1px; clip: rect(0 6px 6px 0);}
.YTR {position: absolute;top: -1px; right: -1px; clip: rect(auto auto 6px 6px); float: right;}
.YBL {position: absolute;clip:  rect(6px 6px auto auto);left: -1px; bottom: -1px;_bottom: -3px;}
.YBR  { position: absolute; clip: rect(6px auto auto 6px);bottom: -1px;right: -1px;_bottom: -3px;}

.fundDetailsBg{ margin:0px 0px 0px 7px; padding:40px 10px 0px 350px; background:url(/_layouts/ABFSG/MF/Images/fund_details.png) left top no-repeat; width:320px; height:118px;  }
.gratuityDetailsBg{ margin:0px; padding:40px 0px 0px 350px; background:url(/_layouts/ABFSG/MF/Images/oursolutions_gratuity.png) left top no-repeat; width:330px; height:90px; font-size:20px;}

.fundDetailsMFBg{ margin:0px; padding:40px 0px 4px 340px; background:url(/_layouts/ABFSG/MF/Images/fund_details.gif) left top no-repeat; width:330px; height:138px; }

.fundDetailsCorporateBg{  margin:0px; padding:40px 0px 4px 0px; background:url(/_layouts/ABFSG/MF/Images/Corporatefunddetailsoverview_img.jpg) left top no-repeat; width:670px; height:145px;}
.shadowSep{background:url(/_layouts/ABFSG/MF/Images/shadowSep.png) left top no-repeat; width:680px; height:9px;}
.marginNeg{margin-left:-5px; margin-right:-2px;}

div.greyTab{background:url('/_layouts/ABFSG/MF/Images/button_sprite.png') left no-repeat;overflow: hidden;         height: 24px;padding-left: 10px;margin-right: 0px;           float:left;             background-position:0px -124px; z-index:1000; }
a:hover.greyTab{text-decoration:none}
a.greyTab { display:block; background:url('/_layouts/ABFSG/MF/Images/button_sprite.png') right no-repeat ;   padding: 5px 23px 5px 5px;            margin-right: 0px;height: 24px;  float:left;             color: #000;         background-position: right -124px;}

#contentBox{ position:absolute; left:264px; left:260px\9; top:256px; float:left; z-index:1001;}
#searchNAVBox{ position:relative;  float:left;}

.borderBottom{ border-bottom:1px solid #acacaa; margin-left:3px; margin-top:-0px; *margin-top:-10px; padding-bottom:10px;}
.greyBox{ background-color:#EAEAEA; border-top:1px solid #acacaa; border-bottom:1px solid #acacaa; padding:10px; margin-left:-10px; padding-left:10px;width:671px;}
.whtBox{ background-color:#fff; padding:10px; margin-left:-10px; padding-left:10px; width:671px;}
.whiteBox_01{padding-bottom:10px; margin-left:-10px; padding-left:10px; background:#ffffff;}

#curtain{ width:100%; height:100%; position: absolute; z-index:995 !important; overflow:hidden; left:0px; top:0px; opacity:.4; filter: alpha(opacity=60); background-color: #000;}
.popupAlign{position:absolute; left:50%; top:20%; z-index:999 !important;}

.closeBtn{width:17px; height:17px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-137px 0px; background-repeat:no-repeat; padding:0px; `enter code here`margin-top:-3px; margin-right:-5px; cursor:pointer;}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

need to put the line 

background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;

before the shading is applied. As shown below. now fixed. thanks damo

.mGrid th { padding: 4px 2px; color: #000000;
             **background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;**  
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
            background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */

          }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.