CODEWITHSUNDEEP
cssgoogle-chromehtml
Mujassir Nasir
Mujassir Nasir

Reputation: 1730

Why a gray background color appears only in Google Chrome?

In other browsers no problem at all. But in chroom when i hover on menu gray background color appears, when move mouse away from menu completely or partially disappears. When i inspect element with firebug then also disappears completely. Here is the image.enter image description here Page Css

body
{
    font-size: .80em;
    font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    background-color: #d0e2e0;
    background-repeat: repeat-x;
    background-image: url('../images/bar6.png');
}
.logout
{
    color: #666666;
    text-decoration: none;
}
.logout:hover
{
    color: #000;
}
fieldset
{
    border-radius: 6px;
}
.ptext
{
    font-size: 11px;
}
fieldset legend
{
    font-size: 14px;
    font-weight: bold;
    color: #4b4b4d;
    font-family: Calibri;
}
img
{
    border-width: 0px;
}
.mainmenu
{
    background-color: #468B6A;
    margin-top: -50px !important;
    width: 74%;
    background-size: 1% 100%;
    background-image: url('../images/bar.png');
}
.clear
{
    clear: both;
}
.footer
{
    margin: 5px auto 5px auto;
    width: 960px;
    text-align: center;
}
.btn
{
    padding: 4px 10px;
}

input[type=submit], input[type=button]
{
    background-image: url('../images/bar1.png');
    background-size: 1% 100%;
    background-color: #D6DD51;
    border: 1px solid #91cda0;
    border-radius: 4px 4px 4px 4px;
    color: #4b4b4d;
    font-family: calibri;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
}
input[type=submit]:hover, input[type=button]:hover
{
    border-color: #ffcc28;
    background-image: none;
    background-color: #D6DD51;
    color: #4b4b4d;
    cursor: pointer;
}

.reportheader
{
    height: 35px;
    background-image: url('../images/bar.png');
    background-size: 1% 100%;
    color: #FFFFFF;
    vertical-align: middle;
    padding: 10px;
    border-radius: 6px 6px 0px 0px;
}
.pageheader
{
    height: 80px;
    color: #666666;
    vertical-align: middle;
    padding: 10px;
    border-radius: 6px 6px 0px 0px;
}
.page
{
    margin: 5px auto 30px auto;
    width: 960px;
    border: 1px Solid #cccccc;
    border-radius: 6px;
    min-height: 600px;
    background-color: #FFF;
}

.fullWidth
{
    width: 100%;
}
.alignLeft
{
    text-align: left;
}
.alignRight
{
    text-align: right;
    vertical-align: text-top;
}
.alignCenter
{
    text-align: center;
    vertical-align: text-top;
}
label
{
    font-size: 11px;
    font-weight: bold;
    color: #666;
}
.textBox, .textArea, .email, .dropdown, .smalltext, .verysmalltext, .listbox, .comment
{
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    height: 22px;
}

.msgSucess
{
    color: #2B7F10;
}
.msgError
{
    color: #800000;
}
.textBox
{
    width: 250px;
}

.textArea
{
    width: 732px;
    height: 272px;
}
.email
{
    width: 250px;
}
.smalltext
{
    width: 150px;
}

.verysmalltext
{
    width: 100px;
}

.dropdown
{
    width: 153px;
}






.textBox:hover, .textArea:hover, .email:hover, .dropdown:hover, .smalltext:hover, .verysmalltext:hover, .listbox:hover
{
    background-color: #F4F4F4;
    border: 1px solid #909090;
}



.validator
{
    color: #FF2828;
}








.floatLeft
{
    text-align: right;
    float: left;
    width: 20%;
}
.floatRight
{
    float: right;
    width: 78%;
}
.floatRight .textBox, .textArea, .dropdown, .smalltext, .verysmalltext
{
}


.floatLeft p
{
    margin-top: 0px;
}
.listbox
{
    margin-top: 3px;
    border: 1px solid #CCCCCC;
    background-color: #F0F0F0;
    padding: 5px;
    width: 200px;
}


.mainDiv
{
    padding: 10px;
    width: 100%;
}


.errorMessage
{
    color: #D8000C;
    border: 1px solid #FF4F4F;
    background-color: #FFE8E1;
    height: 50px;
    width: 400px;
}

.highlightValidator
{
}
.CustomValidator
{
}


.KimsCustomCalloutStyle div, .KimsCustomCalloutStyle td
{
    border: solid 1px #CCCCCC;
    background-color: #F3F3F3;
    color: #666666;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_popup_table
{
    display: none;
    border: none;
    background-color: transparent;
    padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_popup_table_row
{
    vertical-align: top;
    height: 100%;
    background-color: transparent;
    padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_cell
{
    width: 20px;
    height: 100%;
    text-align: right;
    vertical-align: top;
    border: none;
    background-color: transparent;
    padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_table
{
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_table_row
{
    background-color: transparent;
    padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_arrow_cell
{
    padding: 8px 0px 0px 0px;
    text-align: right;
    vertical-align: top;
    font-size: 1px;
    border: none;
    background-color: transparent;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
{
    font-size: 1px;
    position: relative;
    left: 1px;
    border-bottom: none;
    border-right: none;
    border-left: none;
    width: 15px;
    background-color: transparent;
    padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
{
    height: 1px;
    overflow: hidden;
    border-top: none;
    border-bottom: none;
    border-right: none;
    padding: 0px;
    margin-left: auto;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_error_message_cell
{
    font-family: Tahoma;
    font-size: 11px;
    padding: 5px;
    border-right: none;
    border-left: none;
    width: 100%;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_icon_cell
{
    width: 20px;
    padding: 5px;
    border-right: none;
    border-radius: 5px 0 0 5px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_close_button_cell
{
    vertical-align: top;
    padding: 0px;
    text-align: right;
    border-left: none;
    border-radius: 0 5px 5px 0;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
{
    border: none;
    text-align: center;
    width: 10px;
    padding: 1px;
    cursor: pointer;
    border-radius: 0 5px 0 0;
}




.comment
{
    height: 220px;
    width: 650px;
}

.round
{
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px; /*  margin: 15px 0;             */
    padding: 10px;
    width: 100%;
    box-shadow: 2px 2px 2px #CCCCCC;
    min-height: 100px;
}
.imageCss
{
    width: 50px;
    height: 50px;
}
.userName
{
}

.imageCss:hover
{
}

.thumbnail
{
}

.hide
{
    display: none;
}
.sqaText
{
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    height: 22px;
    width: 200px;
    box-shadow: 1px 1px 1px #CCCCCC;
}
.sqaSmallText
{
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    height: 22px;
    width: 200px;
    box-shadow: 1px 1px 1px #CCCCCC;
}
.sqafullWidth
{
    width: 100%;
}
.sqafullWidth .alignRight
{
    vertical-align: middle;
}


.edit
{
    background-image: url('../Images/edit 16x16.png');
    background-repeat: no-repeat;
    background-position: left center;
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 1px #CCCCCC;
    padding: 5px 26px;
    text-decoration: none;
}
.delete
{
    background-image: url('../Images/delete 16x16.png');
    background-repeat: no-repeat;
    background-position: left center;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #CCCCCC;
    box-shadow: 1px 1px 1px #CCCCCC;
    padding: 5px 26px;
    text-decoration: none;
}
.delete:hover
{
    border: 1px solid #808080;
    box-shadow: 1px 1px 1px #808080;
}
.edit:hover
{
    border: 1px solid #808080;
    box-shadow: 1px 1px 1px #808080;
}

.tblconfirm tr th
{
    display: none;
}
.tblconfirm
{
    width: 100%;
}
.tblconfirm td:first-child
{
    background-color: #E4E4E4;
    width: 30%;
    text-align: right;
}
.tblconfirm td:last-child
{
    background-color: #E4E4E4;
    font-weight: bold;
}
.number
{
}
.alphabet
{
}

.fright
{
    float: right;
}
.fleft
{
    float: left;
}
.aright
{
    text-align: right;
}
.aleft
{
    text-align: left;
}
.nic
{
}
#printbtn
{
    background-image: url("../images/print_32.png");
    background-position: left center;
    background-repeat: no-repeat;
    border: 2px solid #D2DA41;
    border-radius: 6px 6px 6px 6px;
    color: green;
    font-family: calibri;
    font-size: 21px;
    font-weight: bold;
    padding: 3px 40px;
    text-align: center;
    text-decoration: none;

}
#printbtn:hover
{
    background-color: #F1F3C2;
    border-color: #F0F000;
}
.validator-error
{
    border-color:Red;
    }


    .test
{
    background-color: #FFF2F2;
}

Menu Css

.grid_12 {
    display: inline;
    float: left;
    margin-left: 5px;
    margin-right: 20px;
    position: relative;
}
#ns_nav-main li li.ns_last {
    border-bottom: 1px solid #009BE2;
}
#ns_nav-sub-wrap {
    border: 1px solid #CCCCCC;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}
#ns_nav-sub {
    font-family: Calibri,Arial;
    font-size: 14px;
    list-style: none outside none;
}
#ns_nav-sub a:hover {
  background-color:#dfe473;

    color:#4b4b4d;
    text-decoration: none;
}
#ns_nav-sub li:first-child a:hover {
   background-color:#dfe473;


    color:#4b4b4d;
    text-decoration: none;
    border-radius: 5px 0 0 5px;
}
#ns_nav-sub li li:first-child a:hover
{
    border-radius: 0px;

    }
#ns_nav-sub li {
    border-left: 1px solid #CCCCCC;
    float: left;
    margin: 0;
    position: relative;
}
#ns_nav-sub li.ns_first {
    border-left: 0 none;
}
#ns_nav-sub li a {
border-left:none;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight:bold;
}
#ns_nav-sub li:hover, #ns_nav-sub li.selected, #ns_nav-sub li.over
{
    /* background: none repeat scroll 0 0 #EFEFEF;*/
    text-decoration: none;

}
#ns_nav-sub .ns_icon-tiny {
    background-position: -1000px -17px;
    position: absolute;
    right: 12px;
    top: 22px;
}
#ns_nav-sub li ul {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;

    background-color:#468B6A;
    border-color: #CCC;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    display: none;
    list-style: none outside none;
    margin-left: -1px;
    position: absolute;
    width: 200px;
    z-index: 10;
}
#ns_nav-sub li:hover ul, #ns_nav-sub li.over ul {
    display: block;
}
#ns_nav-sub li li {
    border-left: 0 none;
    border-top: 1px solid #CCCCCC;
    width: 100%;
}
#ns_nav-sub li li a {
    padding-bottom: 10px;
    padding-top: 10px;
}
#ns_nav-sub li li a:hover {
      background-color:#dfe473;

    color:#4b4b4d;

}
#ns_nav-sub li li:last-child a:hover {
       background-color:#dfe473;
    color:#4b4b4d;
    border-radius: 0 0 5px 5px;
}

.ns_round, a.ns_btn-small, a.ns_btn, a.ns_btn-big, .ns_box, .ns_form button, #ns_box-login, .ns_selector, #ns_top-right .ns_logged-in .ns_bnote, .ns_generic, #ns_nav-sub-wrap, .ns_form input[type="file"], .ns_form input, .ns_form textarea, .ns_form select, .contest_stats, .ns_bubble, .ns_form .ns_radio-btn li, .ns_checkbox-big li, ul.ns_list-box-5 li a, ul.ns_logo-type li, button.ns_btn, ul.ns_list-box-4 li a, .ns_pagination span, .ns_pagination a, .ns_pagination .current.prev, ul.ns_list-box-3 li, table.ns_generic, .ns_code, .ns_tooltip, ul.ns_contest-type li span.ns_icon, .ns_landing-page .ns_contest-panel, .ns_contest-table, .ns_gallery li.ns_entry, ul.ns_milestones li, .ns_contact-pic, ul.ns_skills-bubble li, .ns_designstudio-hiw, .ns_status-box, .ns_level-up, ul.ns_sub-balance, .ns_toggle.ns_expand, .ns_toggle.ns_collapse, .ns_profile-pic, .ns_avg-rating {
    border-radius: 6px 6px 6px 6px;
}
.ns_round-bottom, #ns_nav-main li ul, .ns_fancy-panel, #ns_nav-sub li ul, #ns_nav-sub li ul li.ns_last a:hover, #ns_nav-main li li.ns_last, #ns_nav-main li li.ns_last a:hover, .ns_total, table.ns_generic, .ns_box-half.ns_box-bottom {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.ns_round-top, .ns_box .ns_top, .ns_login-on, .ns_price-box, #ns_box-country, .ns_box-half.ns_box-top, .ns_avg-rating h2 {
    border-radius: 6px 6px 0 0;
}
.ns_round-top-left, table.ns_contest th:first-child, table.ns_generic th:first-child, .dataTable thead tr th:first-child, .ns_notify.ns_generic .ns_sidebar, .ns_table th:first-child, .ns_gamification-dropdown {
    border-top-left-radius: 6px;
}
.ns_round-top-right, table.ns_contest th:last-child, table.ns_generic th:last-child, .dataTable thead tr th:last-child, .ns_table th:last-child, #ns_nav-sub li.ns_last a:hover {
    border-top-right-radius: 6px;
}
.ns_round-bottom-right, ul.ns_gallery .ns_num, #ns_nav-sub li.ns_last a:hover, .ns_gamification-dropdown {
    border-bottom-right-radius: 6px;
}
.ns_round-bottom-left, .ns_zoom-btn, .ns_notify.ns_generic .ns_sidebar, .ns_gamification-dropdown {
    border-bottom-left-radius: 6px;
}
.ns_round-left, #ns_banner .ns_ebook input, #ns_searchbox {
    border-radius: 6px 0 0 6px;
}
.ns_round-right, #ns_banner .ns_ebook button, .ns_btn.ns_openid .ns_status.ns_selected {
    border-radius: 0 6px 6px 0;
}
.ns_round-3, .ns_form input[type="file"], .ns_form input, .ns_form textarea, .ns_form select, .ns_notify, .ns_contacts.ns_search-box, ul.ns_filter li.ns_current, .ns_close, .ns_rate-bubble {
    border-radius: 3px 3px 3px 3px;
}
ul.ns_sidenav li.selected a:hover {
    color: #FFFFFF !important;
}
ul.ns_sidenav li a {
    color: #333333;
    height: 44px;
    line-height: 40px;
    padding-left: 20px;
}
ul.ns_sidenav li a:hover {
    color: #008BCB !important;
    text-decoration: none !important;
}
dt, ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
}
ul.list-style-none, ul.list-style-none li {
    list-style-type: none;
}

Any effort would be appreciated.

Thanks.

Upvotes: 0

Views: 2604

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

I actually get the exact same bug sometimes in Chrome, except it's with the yellow colours of my site's theme. Usually it happens when an element appears or disappears, typically the custom tooltip, and sometimes just moving the mouse around fixes it.

I've reached the conclusion that it's a bug in Chrome's rendering engine, and all we can do is hope they fix it soon.

Upvotes: 2

Related Questions