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 */
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;}
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+ */
}
Related
BACKGROUND
Years ago, I built my first Weebly website for my business ( www.smehelper.com )
The mobile version 'used to' look great!
SINCE THEN
However... Weebly made some changes a year or so ago ( I don't know what ),
since then, regardless of what CSS I've tried in an attempt to overide things, I can't seem to make it change.
NOOB APOLOGIES
Apologies if I'm using wrong terminology, I work in Marketing for a living and specialise in Lead Generation, however, I love to learn various items.
www.smehelper.com
SOURCE CODE
The following is ALL the CSS. Apologies for being a noob - Let me know if there's any other code/files you need 👍
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input{margin:0; padding:0}
ul{list-style:none}
fieldset{border:0}
img{
/*box-shadow: 2px 2px 7px #AAAAAA;*/
/*-webkit-box-shadow: 4px 2px 7px #AAAAAA;*/
/*16px=1em*/
}
html{width:100%}
body{
width:100%;
margin:0;
padding:0;
background-color:#eeeded;
font-family:Trebuchet MS,sans-serif;
/*font-size:14px;*/
color:#eeeded;
/*background: url(bodybg1400x790_planks.jpg);*/
background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top no-repeat fixed; /* top center no-repeat fixed */
background-size: 100% auto;
}
/* #bg{ */
/* background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top center no-repeat fixed;*/
/* } */
blockquote{
margin: 5px 0;
padding-left: 10px;
border-left: 7px solid orange !important;
font: normal 1.3em;
/*font-size:1.2em;
font-style: normal !important;
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;*/
line-height: 160%;
}
blockquote em {
/*font: #ffcc00 !important;*/ /*orange*/
/*font-style: bold !important;
font-size: 1.4em !important;*/
font: bold 1.4em #ffcc00 !important;
}
/*.thought via https://codepen.io/quadbaup/pen/rKOKQv (also in GglDrv_growth-dev_*/
a img{border:0}
a{text-decoration: underline; color:#4db7c8;}
.clear{clear:both}
p{line-height:130%; color:#eeeded; font-size:14px; padding-bottom:10px}
em, ul em {
color:#ffcc00;/*yellow*/
}
h1{font-size:24px; font-weight:bold; color:#4db7c8; margin:0px 0px 10px 0px}
h2{
font-family:arial,sans-serif;
font-size:18px;
line-height:130%;
font-weight:normal;
letter-spacing:2px;
color:#ffc000; /*orig-turqiouse: #4db7c8*/ /*cccccc=Orig grey SW chose OR ffbc66=orange equiv of h2:first-line OR ffc000=warm-bright-yellow */
margin:18px 0px 2px 0px; /*12px 0px 12px 0px*/
/*background-color:yellow;*/
}
h2:bold {
font-size:11px;
color:#4B4B4B;
font-weight: normal;
text-transform:uppercase;
letter-spacing:-3px;
padding: 8px 0px 0px 0px;
}
/*
h2 a:link {
color:white;
text-decoration:none;
/*line-height:150%;*/
/*}*/
/*h2 a:visited {*/
/*color:white;*/
/*}*/
h2 a:hover {
color:white;
text-decoration:underline;
}
h2 a:active {
text-decoration:underline;
/*background-color:yellow;*/
}
h2:first-line {
text-transform:uppercase;
font-size:1.5em; /*SW's orig 18px pre feb'14 - 16px=1em - pre march 15: 1.3em*/
/*font-variant: small-caps; /*pre mar'15=normal*/
line-height:150%; /*pre mar'15=130%*/
color:#66ccff;/*lime: #9dc205*/
letter-spacing:normal;
}
#header{
position:fixed;
top:0px; left:0px;
width:980px;
height:auto;
margin:0pt;
padding:0pt;
border:1px solid green;
background:pink;
}
#line {position:fixed; width:100%; height:125px; margin-top:60px; background:transparent url(navbg.png) repeat-x; z-index:2; border:1px solid green;}
#wrapper { /* this is the header to footer but not whole site background */
position:relative;
z-index:2;
width:980px;
height:100%/*150px*/;
margin:0pt auto;
}
.logo {
z-index:1000;
position:fixed;
top:0px; /*left:0px;*/
margin:0px auto;
width:980px; height:125px;/*width:980px; height:165px;*/ /*Area independent of Nav.*/
background:url("small-business-helper-digital-marketing-for-UK-small-businesses-80pc-30pc.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background:url("small-business-helper-holistic-e-business-consultancy.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background-color:black; opacity:0.50; -moz-opacity:92; filter:alpha(opacity=95);*/ /*use shaded header png instead*/
}
.logo a{
/*display:block;*/
width:100%; height:100%;/*set clickable area*/
text-indent:-9999px;
overflow:hidden;
}
#telephone { /*for right hand side div element*/
float: right;
width: 500px;
font-family: Georgia, "Times New Roman", Times, serif;
color: white;
font-size: 14px;
text-align: right;
}
#telephone .number { /*for addressing class:number within right hand side div telephone element*/
font-size: 34px;
}
#telephone #email a {
text-transform: uppercase;
color: white;
text-decoration: none;
font-size: 15px;
line-height: 24px;
}
.navContainer{ /*FULL WIDTH BAR*/
z-index:5;
position:fixed; top:125px; left:0;
height:35px /*50px*/; width:100%; /*aligns whole nav elements*/
/*margin:2px auto;*/
background:url("shadow1.png");
}
.frame{/*frame for nav area*/
/*width:980px; height:55px;*/
width:980px; height:35px; /*width:980px; height:173px;*/
margin:0px auto/*4px auto 0px auto*/;
/*border:1px solid purple;*/
}
.wsite-mobile-menu {
background: url(theme/shadow1.png?1645107290);!important
}
.wsite-mobile-menu .wsite-menu-mobile-arrow {
color: red; !important
<!-- border: none; -->
<!-- width: 16px; -->
<!-- height: 16px; -->
<!-- top: 5px; -->
<!-- left: 0; -->
<!-- background: url(theme/shadow1.png?1645107290) top left no-repeat; -->
background: url(theme/shadow1.png?1645107290);!important
<!-- background-size: 16px 16px; -->
}
.wsite-mobile-menu li a {
<!-- font-weight: 300; -->
color: red;!important
<!-- padding: 15px; -->
<!-- font-size: 16px; -->
<!-- border-bottom: 1px solid #111 !important; -->
<!-- text-shadow: 0 1px 0 rgb(0 0 0 / 70%); -->
<!-- box-shadow: inset 0 0 1px rgb(255 255 255 / 20%), inset 0 1px 2px rgb(255 255 255 / 10%); -->
background: url(theme/shadow1.png?1645107290);!important
}
.wsite-mobile-menu li a {
<!-- font-size: 1em; -->
<!-- line-height: 1.5; -->
<!-- padding: 8px 10px; -->
<!-- color: white; -->
<!-- text-decoration: none; -->
<!-- display: block; -->
cursor: pointer;
-webkit-tap-highlight-color: blue;!important
}
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x;!important
background-position:0 100%;!important
color:blue/*txt hover color*/;!important
}
.mainNav{ /*actual nav textual area*/
width:980px; /*changing this width wraps all main nav bullet elements*/
font:14px Arial,sans-serif;
color:#fff;
/*margin:0px; */
/*background:url("weebly-menu.png") no-repeat -9999px -9999px;*/
margin:0px auto;
/*border:1px solid red;*/
}
/*when changing all nav height change line-height also.*/
.mainNav a{
display:inline-block;
color:white;
text-decoration:none;
padding:0px 13px;
width:auto;
height:34px;
line-height:34px/*42px*/; /*this aligns the nav text elements vertically*/
margin:0px auto;
background:transparent url("MainNavActive.png") no-repeat -9999px -9999px;
/*border:1px solid red;*/
/*background-color:black; opacity:0.92; -moz-opacity:92; filter:alpha(opacity=95);*/
}
.mainNav a:hover, #active a{
background-repeat:repeat-x;
background-position:0 100%;
color:#00a1b4/*txt hover color*/;
}
.mainNav ul{
margin:0 auto;
list-style:none;
background:url("bullet-weebly-menu.png") no-repeat -9999px -9999px;
}
.mainNav li{
float:left;
}
.mainNav ul li.weebly-nav-more{
background:none;
} /*unsure of usage*/
#weebly-menus .weebly-menu-wrap{
position:absolute; top:25px; left:70%;
width:250px; /*use to set + constrain width for drop downs*/
margin:0px;
/*background:black; opacity:0.85; -moz-opacity:92; filter:alpha(opacity=95);*/ /*initial excess blocks upon initial expansion*/
}
#weebly-menus span.weebly-menu-more{ /*controls the 'more arrows' i.e.>. */
height:100% /*39px*/;
Margin:auto 0px;
padding:auto 0px;
}
#weebly-menus .weebly-menu{
margin:0;
list-style:none;
}
#weebly-menus .weebly-menu li{
float:none; /*controls float/alignment from one sub item to the next e.g.vertical v left=horizontal*/
clear:none;
width:100%; /*sets background width of drop downs*/ vertical-align:top;
}
#weebly-menus .weebly-menu li a{/*this is the actual drop down backgrounds in total*/
font:12px Arial,sans-serif; color:#fff; text-decoration:none;
display:block;
border:0 none;
background:black; /*background:url("bullet-weebly-menu.png") no-repeat 10px 100%*/
width:auto; /*sets text area*/
line-height:15px; height:auto; min-height:18px;
padding:14px 20px 10px 20px;
}
#weebly-menus .weebly-menu li a:hover, #weebly-menus .weebly-menu li.weebly-nav-current a{
background:#003366 /*#336699 #006666 #009999 #00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px */; /*blue hover background on sub-menu*/
/*background:#003366/*#336699/*#006666/*#009999/*#00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px ;*/ /*30px /*50%*/
}
#weebly-menus span.weebly-menu-title{display:inline; padding:0px;}
/* START MOBILE - MOBILE BURGER-MENU & BACKGROUND DROP-DROWN */
/* DESIGN GOAL: DOWN(dark). Standard: White Font. Hover: Blu Background highlight. Slect: Blue Font.*/
/* END MOBILE */
#container{position:relative; z-index:1; width:980px;}
.sliderContainer{width:980px; min-height:200px; height:auto; max-height:400px; overflow:hidden; padding:0px 0px 0px 0px; /*margin-bottom:17px;*/ /*background: url("sliderShadow.png") no-repeat 50% 100%*/}
.sliderContainer-noheader{padding-top:100px;}
.sliderContainer-short{padding-top:125px; width:980px; min-height:200px; height:auto; max-height:400px; overflow:hidden;}
#slider-tall{ position:center; width: 980px;height: 400px; overflow: hidden}
.wsite-header{ width:980px; height:200px; background:url(%%HEADERIMG%%) no-repeat; margin:0px 0px 0px 0px }
#slider-short{ position:center; width: 980px;height: 200px; overflow: hidden}
#slider-medium{ position:center; width: 980px;height: 250px; overflow: hidden}
#slider-home{ position:center; width: 980px;height: 250px; overflow: hidden}
#bar{position:relative; width:980px; height:45px;/*height:50px;*/ margin:4px 0px 2px 0px; background:transparent url(headerbg.png) repeat-x; /*margin-top:25px*/}
#bar-short{position:relative; width:980px; height:45px;/*height:50px;*/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}#bar-short{position:relative; width:980px; height:50px;/**/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}
#sitename{float:left; /*width:810px;*/ padding:10px;/*padding:13px 0px 0px 15px;*/ color:#eeeded; font-family:Georgia; font-style:italic; font-weight:bold; text-align:left; font-size:19px; letter-spacing:0.1em; /*background-color:red; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
.clearfix:after{content:"."; clear:both; display:block; height:0; visibility:hidden}
* html .clearfix{/*height:1%*/}
.framer{/*float:right;*/}
#viewcart{float:right; padding:14px 10px 0px 10px; /*background-color:yellow; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
#social{float:right; padding:8px; /*background-color:blue; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50); margin:-21 10 0 0;*/}
#social li{float:right; /*floats individual elements alongside each other*/list-style-type:none}
#social li a{display:block; margin:0 3px; padding:0; height:30px; width:30px; text-indent:-9999px}
#social li a#rssf{background:url(rss.png) no-repeat top left}
#social li a#rssf:hover{background-position:bottom left}
#social li a#fb{background:url(facebook.png) no-repeat top left}
#social li a#fb:hover{background-position:bottom left}
#social li a#mail{background:url(mail.png) no-repeat top left}
#social li a#mail:hover{background-position:bottom left}
#social li a#twitter{background:url(twitter.png) no-repeat top left}
#social li a#twitter:hover{background-position:bottom left}
#social li a#linkedin{background:url(linkedin.png) no-repeat top left}
#social li a#linkedin:hover{background-position:bottom left}
#content_container{position:relative; z-index:1; width:980px; margin:0px auto;}
#contentbg{position:relative; width:980px; height:auto !important; min-height:300px; background:transparent url(contentbg-98pc-prplGrad.png) repeat-y}
#content{position:relative; width:940px; height:auto !important; min-height:300px; padding:20px 20px 20px 20px}
#footerbg {position:relative; width: 980px; height:60px; background:transparent url(footerbg.png) repeat; margin:4px 0px 20px 0px; padding:10px 0px;}
#footer {position:relative; width:940px; /*height:80px;*/ /*text-align:right;*/ background: url(footerbg.png) repeat; margin:4px 0px 30px 0px; padding:15px 20px 0px 20px;/*border:green 1px solid;*/}
#footer li{}
#footer a{color:#a2a1a0; text-decoration:underline;}
#footer a:hover{color:orange;}
#footer .weebly-footer a{color:#e6e6e6; border:green 1px solid;}
/**************plugin for index.html Layout start HERE*******************************************/
.flash_slider{
width:980px;
height:300px;
overflow:hidden;
/* margin:250px 0px 0px 0px;*/
/* orig margin-left:-7px;*/
/*background:green;*/
}
/***************Splash Page and Landing page CSS Starts Here *************************************/
/*************** START Stick Contact Tab ******************************/
/* http://mojotech.github.io/stickymojo/ */
#sticky-contact-tab {
width: 120px;
background-color: #ccc;
min-height: 200px;
margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
padding: 15px 10px;
float: left; /* float right for a right aligned sidebar */
}
/*************** END Stick Contact Tab ******************************/
WHAT I TRIED
I tried overiding various css elements using !important
I'm guessing, either:
a) I've incorrect css-selection
or
b) I need to add HTML scripts
or
c) It's not doable via Weebly's Manual CSS
EXAMPLE:-
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x;!important
background-position:0 100%;!important
color:blue/*txt hover color*/;!important
}
🤷♀️
Your example is using !important incorrectly. In CSS, the !important must come before the semi-colon, e.g. background-repeat: repeat-x !important;. This appears to be why your styles are not applying.
If you replace your code with the following, you should see the difference:
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x!important;
background-position:0 100%!important;
color:blue/*txt hover color*/!important;
}
As for actually making things more visible, it took a while to find what menu items you were referring to, but I believe you're talking about these:
In this example, I've just overridden color to make them stand out a bit more.
You should be able to get the same result with .wsite-mobile-menu a { color: #000 !important }.
Hello i have created a website in 3 months using HTML, CSS, Jquery and PHP.
for design and layout i have used CSS, after building this website i have noticed that
Whenever i m opening my website in small screens so there is need of width scroll to see
whole page especially the language dropdown selection in right corner of page.
in my CSS i have used PX for divs such as wrapper, header and etc
Someone told me to use Percentage instead of PX, but i have reached to end.
First guys what i should do to solve this problem?
Second is there any way to convert from PX to Percentage.
.wrapper
{
width:1320px;
height:760px;
border:solid 1px #000;
margin:0 auto;
background:url(images/Background_Image.jpg) no-repeat;
}
.wrapper .logo
{
background:url(images/logo.png) no-repeat bottom;
width:360px;
height:180px;
margin-left:345px;
margin-top:10px;
float:left;
}
.wrapper .language
{
float:right;
background-color:#006;
padding:5px 10px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border:#00AEEF;
color: #FFFFFF;
font:bold 1.2em "Calibri";
margin:0px 0px 0px 0px;
cursor:pointer;
text-align:center;
}
.wrapper .language a
{
color:#FFF;
text-decoration:none;
font:"calibiri";
}
.wrapper .search_property
{
width:300px;
height:500px;
margin-right:58px;
margin-top:80px;
float:right;
}
.wrapper .search_property .title
{
background:url(images/protitle.fw.png) no-repeat;
width:295px;
height:80px;
margin-bottom:10px;
float:left;
text-align:center;
color:#FFF;
font: bold 1.7em "Calibri";
}
.wrapper .search_property .province
{
background:url(images/proprovince.fw.png) no-repeat;
width:295px;
height:70px;
float:left;
margin-bottom:10px;
text-align:center;
}
/* start design for the province */
select
{
width:195px;
margin-top:23px;
padding:3px 3px 3px 46px;
font: bold 1em "Calibri";
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1.3px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f6f6f8;
color:#000;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
option
{
text-align:center;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
.la
{
position:relative;
}
.la:after {
content:'<>';
font:11px "Consolas", monospace;
color:#000;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
.la:before {
content:'';
right:3.5px;
top:-1px;
width:25px; height:22px;
background:#ccc;
position:absolute;
pointer-events:none;
display:block;
}
/* end design for the province */
.wrapper .search_property .district
{
background:url(images/prodistrict.fw.png) no-repeat;
width:295px;
height:70px;
float:left;
margin-bottom:10px;
text-align:center;
}
.wrapper .search_property .propertystatus
{
background:url(images/prostatus.fw.png) no-repeat;
width:295px;
height:90px;
float:left;
margin-bottom:10px;
color:#FFF;
padding:20px 0 0 0;
}
radio
{
cursor:pointer;
}
.wrapper .search_property .probutton
{
width:270px;
height:50px;
float:left;
margin-bottom:3px;
padding:0 0 0 25px;
}
.wrapper .search_property .postprobutton
{
width:285px;
height:40px;
float:left;
margin-top:5px;
padding:0 0 0 10px;
}
#Submitbutton
{
background: #006 url(images/a.fw.png) no-repeat right;
padding:5px 15px;
border-radius:4px;
width:233px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border:#00AEEF;
color: #FFFFFF;
font:bold 1.5em "Calibri";
margin:0px 0px 0px 0px;
cursor:pointer;
text-align:left;
}
#pypbutton
{
background: #006 url(images/Property%20List.png) no-repeat right;
padding:5px 15px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border:#00AEEF;
color: #FFFFFF;
font:bold 1.4em "Calibri";
margin:0px 0px 0px 0px;
cursor:pointer;
text-decoration:none;
}
.wrapper .slideshow
{
width:395px;
height:264px;
margin-left:325px;
margin-top:24px;
float:left;
}
.wrapper .menu
{
width:412px;
height:20px;
margin-left:327px;
margin-top:40px;
float:left;
}
.wrapper .menu .aboutus
{
width:68px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .myaccount
{
width:85px;
height:18px;
color:#fff;
margin:0px 5px 0px 0px;
font: 1em Arial, Helvetica, sans-serif;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .services
{
width:65px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .career
{
width:54px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .contactus
{
width:87px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
}
.wrapper .footer
{
background:url(images/footerbg.jpg) bottom;
width:1120px;
height:155px;
margin-top:15px;
float:left;
margin-left:100px;
}
.wrapper .footer .footer_in
{
width: 900px;
height: auto;
margin: auto;
padding: 14px 0px 0px 0px;
}
.wrapper .footer .footer_in .footer_navigation
{
/*width:412px;*/
height:128px;
float:left;
font-size:11px;
background:url(images/border.jpg) right no-repeat;
font: 1em "Calibri";
width:350px;
}
.wrapper .footer .footer_in .footer_navigation .fn_heading
{
width:310px;
font: 1em "Calibri";
color:#fff;
height:37px;
font-size:12px;
background:url(images/footerimg.png) no-repeat;
padding-left:10px;
line-height:24px;
}
.wrapper .footer ..footer_in .footer_navigation ul {
float:left;
width:320px;
padding-left:9px;
}
.wrapper .footer .footer_in .footer_navigation li {
float:left;
width:127px;
background:url(images/listimg.gif) no-repeat left;
padding-left:12px;
display:block;
padding-bottom:4px;
}
.wrapper .footer .footer_in .footer_navigation li a
{
color:#fff;
text-decoration:none;
}
.wrapper .footer .footer_in .footer_navigation li a:hover {
text-decoration:underline;
}
.wrapper .footer .footer_in .copyright
{
background: url(images/border.gif) no-repeat scroll right center transparent;
color: #FFFFFF;
float: left;
font: 1em "Calibri";
min-height: 94px;
padding-left: 14px;
padding-right: 30px;
padding-top: 35px;
}
.wrapper .footer .footer_in .copyright a
{
padding-bottom:5px;
color:#fff;
text-decoration:none;
}
.wrapper .footer .footer_in .copyright a:hover
{
text-decoration:underline;
}
.wrapper .footer .footer_in .footer-add
{
text-align:center;
width:220px;
float:right;
margin-left:10px;
font: 1em "Calibri";
}
.wrapper .footer .footer_in .footer-add a
{
color:#fff;
background:url(images/link_for_scale-new_03.png) no-repeat bottom;
height:122px;
display:block;
}
Check your monitor resolution (By the CSS, my guess is that it is 1440x768).
Now do this math with every pixel value: ("Pixel Width Value"/1440)*100 and ("Pixel Height Value"/768)*100.
That is your value in %!
Some elements might not work properly, but it's a good way to start.
There are also other units that can work depending on the screen size
check one of them here.
However I think % might be the best for you to start out.
I'm trying to create a navigation bar. What I want is when I hover to the block item it changes the background. My problem is the block is a little bigger than the link, so if I move the mouse outside the link area I can't click on it.
This is the jsfiddle I created, I changed the background color of the link when hovering over for a better visual aid
http://jsfiddle.net/Tx8MK/3/
so how can I make the link block fit the list block.
Thank you
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
padding: 3px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
color:#000;
display:block;
padding: 0 25px;
background:#fff;
}
Instead of giving the padding to the list items, give it to the anchors. Updated fiddle below:
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
padding: 4px 10px 4px 10px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
...
}
http://jsfiddle.net/hQJye/
The problem was your padding applied to your LI. Removing that made the <a> fill your LI.
http://jsfiddle.net/Tx8MK/5/
html, body {
margin: 0;
padding: 0;
}
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
nav {
position:absolute;
top:0;
width:100%;
background: #000;
color: #fff;
list-style: none;
}
nav section{
margin:10px 20px;
}
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
display:block;
color:#000;
background:#ff0000;
}
When I hover the first div for example, it is meant to change the bg color, and the color changes but it flashes when changing the color and it's not smooth at all in Chrome. but it is really smooth in IE and Firefox ... Why is that? (that's all I want to know)
CSS:
.bg {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
background-color:#D8D8D8;
z-index:-10;
}
.DIVOne {
color:#FFF;
margin-top:10%;
background-color:#A2D700;
height:300%;
line-height:200%;
width:20%;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-5;
}
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVOne:hover ~ .bg {
background-color:#A2D700;
transition:all 0.5s;
}
.DIVTwo {
color:#FFF;
background-color:#FF8000;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVTwo:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVTwo:hover ~ .bg {
background-color:#FF8000;
}
.DIVThree {
color:#FFF;
background-color:#0080FF;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVThree:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVThree:hover ~ .bg {
background-color:#0080FF;
}
HTML:
<div class="DIVOne"> Content </div>
<div class="DIVTwo"> Content </div>
<div class="DIVThree"> Content </div>
demo: http://www.jsfiddle.net/aryanf/w7unZ/
The problem is with the following code
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
It's the position:relative; property that is causing the problem on Chrome. Try removing it. Besides, I don't see why you have introduced it in the first place. It seems to work fine without it.
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
//position:relative;
left:2px;
top:3px;
}
If it is not rendering and appearing smooth on other browsers, try to add some css code additionaly inside your CSS file.
Suppose if you need Rounded Corner Border in IE, you will use
.ddlStyle {
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
But this may not render perfect on all other Browser due to different behavior of Rendering Engine. So make addition of some lines and try on other browsers.
.ddlStyle {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
Hope, it solves the problem.
My class goes like this to expand the div dynamically as min-height is given. May i know what goes wrong with this.
.gil_Individual_FormPanelBg
{
width:500px;
min-height:50px !Important;
float:none;
margin:5px auto;
padding:4px;
background-color:#f7f7f7;
border:Solid 1px #e6e6e6;
-border-radius:4px 4px 4px 4px;
-Moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
Shabir, looks as though you have got a whole heap of float:left's when there is no need.
Try this updated CSS:
.gil_Individual_FormPanelBg
{
width:500px;
min-height:50px;
margin:5px auto;
padding:4px;
background-color:#f7f7f7;
border:Solid 1px #e6e6e6;
-border-radius:4px 4px 4px 4px;
-Moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
.gil_Individual_FormWrapper
{
position:relative;
height:auto;
width:100%;
margin:2px auto;
padding:0px;
}
.gil_Individual_FormRow
{
position:relative;
width:100%;
min-height:20px !Important;
margin:3px 0 0 0;
padding:0px;
}
.gil_Individual_FormLable
{
position:relative;
width:150px;
height:15px;
float:left;
margin:0px;
padding:0px;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
font-size:11px;
font-weight:Normal;
color:#3B5998;
text-align:left;
text-decoration:none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.gil_Individual_FormCtrl
{
position:relative;
width:350px;
min-height:15px !Important;
float:left;
margin:0px;
padding:0px;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
font-size:11px;
font-weight:Normal;
color:#333;
text-align:left;
text-decoration:none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
HTML stays the same. If you are going to add the class float. Consider creating a clear class to place after the floated DIV.
Class something like this:
.clear{
clear:both;
margin:0;
padding:0;
height:1px;
}
After reviewing the link you posted, it does look like you have probably over complicated the build but hopefully it should work the way you want it to now.
Dan