I've looked at the other questions and still cannot figure this out.
EDIT
Here is a HTML page which reproduces my error:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<HTML>
<HEAD><STYLE>
HTML
{
min-height: 0px;
font-size: 100%;
}
BODY
{
min-height: 0px;
font-size: 100%;
}
DIV
{
min-height: 0px;
font-size: 100%;
}
HTML
{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
BODY
{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
BODY
{
position: relative;
min-width: 100%;
background-color: #333;
margin: 0px;
display: inline-block;
font-family: Arial, Sans-Serif;
height: 100%;
font-size: 12px;
}
#abc_content
{
border-bottom: #666 2px solid;
border-left: #666 0px solid;
padding-bottom: 5px;
background-color: #fff;
padding-left: 5px;
padding-right: 5px;
border-top: #666 2px solid;
border-right: #666 0px solid;
padding-top: 5px;
}
#abc_leftbar + #abc_content
{
margin-left: 210px;
}
.ui-helper-clearfix:after
{
display: block;
height: 0px;
visibility: hidden;
clear: both;
content: ".";
}
.ui-helper-clearfix
{
display: inline-block;
}
.ui-helper-clearfix
{
display: block;
}
.ui-state-disabled
{
cursor: default !important;
}
.ui-widget-header
{
background: #176000;
color: #ffffff;
}
.ui-state-default
{
border-bottom: #176000 1px solid;
border-left: #176000 1px solid;
background-color: #458b11;
color: #ffffff;
border-top: #176000 1px solid;
border-right: #176000 1px solid;
}
.ui-widget-header .ui-state-default
{
border-bottom: #176000 1px solid;
border-left: #176000 1px solid;
background-color: #458b11;
color: #ffffff;
border-top: #176000 1px solid;
border-right: #176000 1px solid;
}
.ui-state-disabled
{
filter: alpha(opacity=75); opacity: .75;
-moz-opacity: .75;
-khtml-opacity: .75;
}
.ui-corner-tl
{
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
}
.ui-corner-tr
{
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
.ui-corner-bl
{
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.paging_full_numbers .ui-button
{
padding-bottom: 2px;
margin: 0px;
padding-left: 6px;
padding-right: 6px;
cursor: pointer;
padding-top: 2px;
}
.ui-buttonset .ui-button
{
margin-right: -0.1em !important;
}
.paging_full_numbers
{
width: 350px !important;
}
.ui-toolbar
{
position: relative;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
zoom: 1;
height: 20px;
padding-top: 5px;
}
.dataTables_paginate
{
width: auto;
}
.dataTables_wrapper
{
font-family: Arial, Sans-Serif;
max-width: 100%;
font-size: 120%;
font-weight: bold;
}
.dataTables_wrapper
{
position: relative;
min-height: 302px;
clear: both;
_height: 302px;
}
.dataTables_paginate
{
text-align: right;
line-height: 20px;
float: right;
height: 20px;
}
</STYLE></HEAD>
<BODY><DIV id="abc_content"><DIV id="dd_table_wrapper" class="dataTables_wrapper"><DIV class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"><DIV id="dd_table_paginate" class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers">
<SPAN id="dd_table_first" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" jQuery1297179778124="2">First</SPAN>
</DIV></DIV></DIV></DIV></BODY></HTML>
It works in FF and Chrome, but not in IE (I am using IE 8).
Any ideas? Thanks!
you need to set the -ms-filter in IE 8
opacity: .70; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=70); /* IE lt 8 */
-ms-filter: "alpha(opacity=70)"; /* IE 8 */
-khtml-opacity: .70; /* Safari 1.x */
-moz-opacity: .70; /* FF lt 1.5, Netscape */
Opacity is not supported in IE8 - You can use MS's gradient filter instead:
.className{
opacity: 0.7;
-ms-filter: "alpha (opacity=70)";
filter: alpha (opacity=70);
}
i just changed the colors to make it look like i'm changing the opacity. IE fail...
Try use:
opacity:.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
Related
I have tried a lot but unable to figure out whats wrong. The z-index is not working at all when hovering over the Available Balance question mark (?). Upon hover over the question mark (?), it can be noticed that the tooltip is getting cut by the table heading area. Can someone please guide me what needs to be changed? Here is the complete code I am working with. Sorry for the long code but I have tried to put in as much as I can for some one to figure this out.
/* SECONDARY TOOLTIP (S) */
[tooltip] {
position: relative;
}
/* Arrow */
[tooltip]:before {
width: 16px;
height: 6px;
left: 50%;
margin-top: 1px;
top: calc(100% - 10px);
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0%);
opacity: 0;
-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
pointer-events: none;
}
/* Text */
[tooltip]:after {
transform: translate(-50%, 0%);
left: 50%;
margin-top: 11px;
top: calc(100% - 10px);
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(tooltip);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 9px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
pointer-events: none;
/* overflow: overlay; */
z-index: 999999;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
opacity: 1;
pointer-events: auto;
top: calc(100% + 0px);
z-index: 99999;
overflow: visible;
position: absolute;
}
/* SECONDARY TOOLTIP (E) */
.claro .dojoxGridHeader:first-child .dojoxGridRowTable {
border-left-width: 0;
}
.claro .dojoxGridMasterHeader .dojoxGridRowTable {
border-left: 1px solid #BCBCBC;
border-right: 1px solid white;
background-color: transparent;
}
.base .dojoxGridRowTable {
height: 30px !important;
word-wrap: break-word;
}
table.dojoxGridRowTable {
table-layout: auto;
}
.dojoxGridHeader table {
text-align: center;
}
.dojoxGrid table {
padding: 0;
}
.dojoxGridRowTable {
table-layout: fixed;
width: 0;
empty-cells: show;
}
table {
font-size: 100%;
}
table[Attributes Style] {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
user agent stylesheet
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
.claro .dojoxGridHeader:first-child {
/* margin-left: -50px; */
text-align: left;
margin: 0px -1px;
}
.dojoxGridHeader {
position: absolute;
overflow: hidden;
cursor: default;
}
.base .dojoxGrid {
background-color: #FFFFFF;
font-size: 12px;
color: #00204e;
padding: 0px 1px 20px 0px;
border-top: 0px;
height: 40px;
/* margin-top: 115px; */
/* border-top: solid 1px #D0D0D0; */
/* border-bottom: solid 1px #D0D0D0; */
/* margin-bottom: 20px; */
width: 100%;
/* width: 647px; */
/* height: 226px !important; */
}
.base .dojoxGrid {
background-color: transparent;
border-width: 1px 0 0 0;
font-size: 1em;
}
.base .dojoxGrid {
font-size: 0.916em;
}
.dojoxGrid {
position: relative;
background-color: #EBEADB;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
.portlet {
margin: 4px 0 30px 0;
padding: 0;
font-size: 0.75em;
}
body {
/* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
font-size: 14px;
color: #00204c;
/* margin-left: 125px; */
margin: 0 auto;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.base .dojoxGridRowTable {
height: 30px !important;
word-wrap: break-word;
}
.dojoxGridHeader table {
text-align: center;
}
.dojoxGridRowTable {
table-layout: fixed;
width: 0;
empty-cells: show;
}
table {
font-size: 100%;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
.claro .dojoxGridHeader:first-child {
/* margin-left: -50px; */
text-align: left;
margin: 0px -1px;
}
.dojoxGridHeader {
position: absolute;
overflow: hidden;
cursor: default;
}
.base .dojoxGrid {
background-color: #FFFFFF;
font-size: 12px;
color: #00204e;
padding: 0px 1px 20px 0px;
border-top: 0px;
height: 40px;
/* margin-top: 115px; */
/* border-top: solid 1px #D0D0D0; */
/* border-bottom: solid 1px #D0D0D0; */
/* margin-bottom: 20px; */
width: 100%;
/* width: 647px; */
/* height: 226px !important; */
}
.base .dojoxGrid {
background-color: transparent;
border-width: 1px 0 0 0;
font-size: 1em;
}
.base .dojoxGrid {
font-size: 0.916em;
}
.dojoxGrid {
position: relative;
background-color: #EBEADB;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
.claro .dojoxGridHeader .dojoxGridRowTable tr {
background: none;
}
.claro .dojoxGridRowTable tr {
background: url(images/row_back.png) #fff repeat-x;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.base .dojoxGridRowTable {
height: 30px !important;
word-wrap: break-word;
}
.dojoxGridHeader table {
text-align: center;
}
.dojoxGridRowTable {
table-layout: fixed;
width: 0;
empty-cells: show;
}
table {
font-size: 100%;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
.claro .dojoxGridHeader:first-child {
/* margin-left: -50px; */
text-align: left;
margin: 0px -1px;
}
.dojoxGridHeader {
position: absolute;
overflow: hidden;
cursor: default;
}
.base .dojoxGrid {
background-color: #FFFFFF;
font-size: 12px;
color: #00204e;
padding: 0px 1px 20px 0px;
border-top: 0px;
height: 40px;
/* margin-top: 115px; */
/* border-top: solid 1px #D0D0D0; */
/* border-bottom: solid 1px #D0D0D0; */
/* margin-bottom: 20px; */
width: 100%;
/* width: 647px; */
/* height: 226px !important; */
}
.base .dojoxGrid {
background-color: transparent;
border-width: 1px 0 0 0;
font-size: 1em;
}
.base .dojoxGrid {
font-size: 0.916em;
}
.dojoxGrid {
position: relative;
background-color: #EBEADB;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
#AccountSummarySavingsListPortlet th[idx="3"], #AccountSummarySavingsListPortlet td[idx="3"] {
text-align: right !important;
}
.claro .dojoxGridHeader tr:first-child .dojoxGridCell {
border-top: 1px solid transparent;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #FFFFFF;
font-size: 1em;
font-weight: bold;
color: #00204e;
border-bottom: thin;
border-bottom-style: solid;
border-bottom-color: #D0D0D0;
height: 20px;
text-align: left !important;
/* white-space: nowrap !important; */
padding: 15px 0px;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #7692B7;
}
.base .dojoxGridHeader .dojoxGridCell {
padding: 5px;
}
.base .dojoxGridHeader .dojoxGridCell {
border: 1px solid #fff;
font-weight: bold;
color: #fff;
}
.base .dojoxGridHeader .dojoxGridCell {
text-align: center;
}
.claro .dojoxGridHeader .dojoxGridCell {
padding: 2px 5px;
background: transparent;
border-bottom: 1px solid #BCBCBC;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid #BCBCBC;
vertical-align: top;
}
.claro .dojoxGridHeader .dojoxGridCell {
background: url(images/header.png) #e5edf4 repeat-x top;
border-style: solid;
border-width: 1px;
border-color: #BCBCBC #BCBCBC #BCBCBC transparent;
}
.base .dojoxGrid th {
text-align: center;
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: 1px solid #fff;
padding-left: 3px !important;
}
.claro .dojoxGridCell, .claro .dojoxGridCellFocus {
outline: none;
}
.claro .dojoxGridCell {
padding: 3px 5px;
border-color: transparent #E5DAC8 #E5DAC8 transparent;
}
.claro .dojoxGridCell {
padding: 0px;
border: 1px solid transparent;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #FFFFFF;
font-size: 1em;
font-weight: bold;
color: #00204e;
border-bottom: thin;
border-bottom-style: solid;
border-bottom-color: #D0D0D0;
height: 20px;
text-align: left !important;
/* white-space: nowrap !important; */
padding: 15px 0px;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #7692B7;
}
.base .dojoxGridHeader .dojoxGridCell {
padding: 5px;
}
.base .dojoxGridHeader .dojoxGridCell {
border: 1px solid #fff;
font-weight: bold;
color: #fff;
}
.base .dojoxGridHeader .dojoxGridCell {
text-align: center;
}
.claro .dojoxGridHeader .dojoxGridCell {
padding: 2px 5px;
background: transparent;
border-bottom: 1px solid #BCBCBC;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid #BCBCBC;
vertical-align: top;
}
.claro .dojoxGridHeader .dojoxGridCell {
background: url(images/header.png) #e5edf4 repeat-x top;
border-style: solid;
border-width: 1px;
border-color: #BCBCBC #BCBCBC #BCBCBC transparent;
}
.base .dojoxGrid th {
text-align: center;
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: 1px solid #fff;
padding-left: 3px !important;
}
.claro .dojoxGridCell, .claro .dojoxGridCellFocus {
outline: none;
}
.claro .dojoxGridCell {
padding: 3px 5px;
border-color: transparent #E5DAC8 #E5DAC8 transparent;
}
.claro .dojoxGridCell {
padding: 0px;
border: 1px solid transparent;
}
.dojoxGridHeader .dojoxGridCell {
border: 1px solid;
border-color: #F6F4EB #ACA899 #ACA899 #F6F4EB;
background: url(images/grid_dx_gradient.gif) #E8E1CF top repeat-x;
padding-bottom: 2px;
}
.dojoxGridCell {
border: 1px solid;
border-color: #EBEADB;
border-right-color: #D5CDB5;
padding: 3px 3px 3px 3px;
text-align: left;
overflow: hidden;
}
caption, th {
text-align: left;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
/* margin: 0; */
padding: 0;
}
th {
font-weight: bold;
text-align: -internal-center;
}
table {
font-size: 100%;
}
/*------------------------------------------ */
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#A_12 {
border: 1px solid #00204e;
border-radius: 50%;
}
<table class="dojoxGridRowTable" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 1001px;" id="TABLE_1"><tbody id="TBODY_2"><tr id="TR_3"><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_4" class="dojoxGridCell dojoDndItem dojoxGridCellFocus" idx="0" style="text-align: center;text-align: center;width:30%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_5">Account</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_6" class="dojoxGridCell dojoDndItem" idx="1" style="text-align: center;text-align: center;width:5%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_7">Currency</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_8" class="dojoxGridCell dojoDndItem" idx="2" style="text-align: right;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_9">Pending balance</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_10" class="dojoxGridCell dojoDndItem" idx="3" style="text-align: right;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_11">Available balance</div><a tooltip="this is a test" style="
position: relative;
text-align: center;
width: 100%;
display: block;
/* overflow: visible; */
" id="A_12">?</a>
</th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_13" class="dojoxGridCell dojoDndItem" idx="4" style="text-align: center;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_14">Accrued Interest Rate</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_15" class="dojoxGridCell dojoDndItem" idx="5" style="text-align: center;text-align: center;width:10%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_16">Active</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_17" class="dojoxGridCell dojoDndItem " idx="6" style="text-align: center;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_18">Interest Rate</div></th></tr></tbody></table>
because overflow is hidden in class .dojoxGridCell
set overflow to inherit
.dojoxGridCell {
border: 1px solid;
border-color: #EBEADB;
border-right-color: #D5CDB5;
padding: 3px 3px 3px 3px;
text-align: left;
overflow: inherit;
}
I'm having issue to display a button with angled sides with css using :before and :after pseudo elements. It is working in Chrome and Firefox but not in Edge and IE 11.
What might be the problem?
a { text-decoration: none }
.container { margin: 20px; }
.font-jos {
font-family: Verdana;
}
.btn-ribbon {
position: relative;
display:inline-block;
padding: 13px 11px;
background-color: #b46b78;
color: #fff;
font-size: 15px;
line-height: 18px;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: 0;
border: none;
margin-left: 20px;
text-transform: uppercase;
}
.btn-ribbon:before {
content: "";
position: absolute;
top: 0;
left: -10px;
display: block;
width: 0;
height: 0;
border-top: 22px solid #b46b78;
border-bottom: 22px solid #b46b78;
border-left: 10px solid #fff0;
z-index: 1;
}
.btn-ribbon:after {
content: "";
position: absolute;
top: 0;
right: -10px;
display: block;
width: 0;
height: 0;
border-top: 22px solid #b46b78;
border-bottom: 22px solid #b46b78;
border-right: 10px solid #fff0;
z-index: 1;
}
<div class="container">
Read more
</div>
https://codepen.io/nidus/pen/gXJYLg
You need to change #fff0 to rgba(255, 255, 255, 0) or transparent in your CSS border-right: 10px solid transparent; and border-left: 10px solid transparent;. It's not liking the formatting of the colors.
IE and Edge don't seem to support that format.
Here's a working example:
a { text-decoration: none }
.container { margin: 20px; }
.font-jos {
font-family: Verdana;
}
.btn-ribbon {
position: relative;
display:inline-block;
padding: 13px 11px;
background-color: #b46b78;
color: #fff;
font-size: 15px;
line-height: 18px;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: 0;
border: none;
margin-left: 20px;
text-transform: uppercase;
}
.btn-ribbon:before {
content: "";
position: absolute;
top: 0;
left: -10px;
display: block;
width: 0;
height: 0;
border-top: 22px solid #b46b78;
border-bottom: 22px solid #b46b78;
border-left: 10px solid transparent;
z-index: 1;
}
.btn-ribbon:after {
content: "";
position: absolute;
top: 0;
right: -10px;
display: block;
width: 0;
height: 0;
border-top: 22px solid #b46b78;
border-bottom: 22px solid #b46b78;
border-right: 10px solid transparent;
z-index: 1;
}
<div class="container">
Read more
</div>
I am trying to create a cinnamon CSS theme, but I'm having a very strange issue.
As you can see below, I have set .menu-application-button:hover and .menu-application-button-selected's backgound-colour attribute to #3478db.
This works fine except when a scrollbar is present, where the background appears white. This is bizarre, as I have not set anything to white in the menu code at all. I have tried using !important but the problem still persists.
Is this just a silly mistake done by me, or a bug in cinnamon? And if it is a mistake how can I fix it?
here's the menu code:
/* ===================================================================
* Menu (menu.js)
* ===================================================================*/
.menu-favorites-box {
width: 50px;
margin: auto;
padding: 10px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: rgba(85,85,85,0.1);
transition-duration: 100;
}
.menu-favorites-button {
padding: 10px;
}
.menu-favorites-button:hover {
padding: 10px 4px 10px 16px;
}
.menu-help-button {
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}
.menu-help-button:hover {
color: white;
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.12);
background-gradient-end: rgba(255,255,255,0.06);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.12);
border-radius: 3px;
}
.menu-places-box {
padding: 10px;
}
.menu-places-button {
padding: 10px;
}
.menu-categories-box {
padding-top: 15px;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 0px;
}
.menu-applications-box {
padding-top: 15px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 0px;
}
.menu-application-button {
height: 36px;
padding: 0px 7px;
}
.menu-application-button:hover,
.menu-application-button-selected {
height: 36px;
padding: 0px 7px;
color: rgba(255,255,255,1);
background-color: #3478db;
border-color: #3374D4;
}
.menu-application-button-label:ltr {
padding-left: 5px;
}
.menu-application-button-label:rtl {
padding-right: 5px;
}
.menu-category-button {
height: 36px;
padding: 0px 7px;
}
.menu-category-button-greyed {
height: 36px;
padding: 0px 7px;
color: #aaa;
}
.menu-category-button-selected {
height: 36px;
padding: 0px 7px;
background-color: #3478db;
color: rgba(255,255,255,1);
border-color: #3374D4;
}
.menu-category-button-label:ltr {
padding-left: 5px;
}
.menu-category-button-label:rtl {
padding-right: 5px;
}
/* Name and description of the currently hovered item in the menu
* This appears on the bottom right hand corner of the menu*/
.menu-selected-app-box {
padding-right: 30px;
padding-left: 28px;
text-align: right;
}
.menu-selected-app-title {
font-weight: bold;
color: #4784de;
}
.menu-selected-app-description {
max-width: 150px;
color: #333;
}
.menu-search-box:ltr {
padding-left: 15px;
}
.menu-search-box:rtl {
padding-right: 15px;
}
#menu-search-entry {
border-image: url("entry.png") 5;
color: #333;
caret-color: #333;
font-size: 12pt;
caret-size: 1px;
selected-color: white;
selection-background-color: #4784de;
padding: 0px 8px;
width: 15em;
height: 30px;
}
.menu-search-entry-icon {
icon-size: 1em;
color: #333;
}
.menu-context-menu {
}
the full code, if needed, is available at http://pastebin.com/yTCF0b9f.
I was using this code to create a ruler on my site:
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
HTML:
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
It was working OK with bootstrap2:
http://jsfiddle.net/Uvt5U/4/
Now I'm migrating to bootstrap3 and the ruler is broken:
http://jsfiddle.net/Uvt5U/
How can I get it working?
Kind Regards.
This is because in Bootstrap 3 box-sizing style is set to border-box, while in Bootstrap 2 it's not.
My Firebug points me that this rule is setting this style:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
bootstrap.min.css line 9
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.
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.
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.