How to solve internet Explorer 7 css menu bug - css

I have an Internet Explorer 7 css issue with my navigation menu.
The links are getting pushed out of line in Internet Explorer.
I think I have a padding problem, any help would be great!!!
http://jsfiddle.net/558pA/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
.green-btn {
background: #4cc44a;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
padding:0px;
float:right;
}
#nav>li {
float: right;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 20px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
position: absolute;
right: 0px;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li ul.tabs li {
clear: left;
margin: 0;
width: 100%;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
#chart-btn {
background: #4cc44a;
color: white;
padding: 10px 20px;
margin-top: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
}
#chart-btn a {
color: white !important;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
#nav li a {
height: auto;
padding: 15px;
font-size: 14px;
font-weight: bold;
line-height: 1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
#nav>li img {
top:0px;
}
#chart-btn {
background:none;
color: white;
padding: 10px 20px;
margin-top: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
}
#chart-btn a {
color: white !important;
}
}

Related

Creating space between Side Buttons

I'm trying to create a space down the left hand side of my page for social media buttons, my problem is the buttons will not spread apart to where there is a large enough gap between buttons.
enter image description here
body {
background: darkgrey;
background-image:url('../https://www.dropbox.com/home?preview=city.jpg');
font-family: arial;
}
#wrapper {
width: 800px;
margin: 100px auto 0 auto;
padding-bottom: 20px;
}
#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}
.logo{
text-align: center;
}
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #ccc, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: linear-gradient(to bottom, #ccc, #ddd);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after{
background: #fff;
z-index: 3;
}
#content
{
background: #fff;
padding: 2em;
height: 520px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
p {text-align:left;
line-height:120%;
margin-right: 2cm;
letter-spacing: 0px;
}
#icons {
position: absolute;
top: 86px;
left: -90px;
z-index: 3;
}
table {border: solid darkgrey thin;
}
}
footer {
display: inline-block;
width:800px;
text-align: left;
margin-top: 250px;
}
footer ul {list-style-type: none;
text-align: center;
float: left;
}
footer li {display:inline;
margin-left: 20px;
}
footer a:link{
text-decoration: none;
}
footer p {
float:right;
}
.menu {
word-spacing: 10px;
}

Unable to center correctly a div in CSS

I am working on this project :
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
float: right;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li>Projects</li>
<!--<li>Activity</li>
<li>Friends</li>-->
<li>Profile Details</li>
<li>Orders</li>
<li>Add an article</li>
</ul>
</nav>
</div>
</div>
The main content of the page has been inserted in a div named #w. I have applied margin: 0 auto; to #w for it to be centered but it is not working correctly. The margin-left is always bigger than the right side, whenever I try to reduce the margin-left, I end up having something else.
Please let me know How I can fix this problem.
Remove
#content {
width: 100%;
}
Or add
#content {
box-sizing: border-box;
}
By default, the width does not include the padding. So the outer width is bigger.
Try this :
add box-sizing property in #content
#content{
box-sizing: border-box; // ADD this
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
This is because your #userphoto is overlapping you <h1> check this out with position:absolute on #userphoto.
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
position: absolute;
right: 0;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li>Projects</li>
<!--<li>Activity</li>
<li>Friends</li>-->
<li>Profile Details</li>
<li>Orders</li>
<li>Add an article</li>
</ul>
</nav>
</div>
</div>

How to change CSS colors in classical Drupal7 theme?

I want to change a color of the main menu background in classical free Drupal 7 theme. It is in orange, I want to make it in the other color (dark blue or green). This is the Drupal repository for the themes
I could not locate the necessary CSS code block to change. I have read theme guides, color schemes and books on it, not clear yet. The orange color there starts with ff...
Please advise how to do it.
Here is the CSS original code:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot');
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Deafults */
/* Default Style
--------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
border: 1px solid #bbbbbb;
background: rgb(241, 241, 241) url(images/quote.png) no-repeat;
padding: 10px 5px 5px 47px;
text-shadow: 1px 1px #fff;
margin: 5px 0;
border-radius: 7px;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
pre {
background: #d8d8d8;
text-shadow: 1px 1px #fff;
border: 1px solid #bbbbbb;
padding: 7px;
margin: 5px 0;
border-radius: 7px;
}
code {
background: rgb(240, 240, 240);
text-shadow: 1px 1px #fff;
border: 1px solid #bbbbbb;
display: block;
padding: 7px;
margin: 5px 0;
border-radius: 7px;
}
ins {
background-color:#fdfc9b;
text-decoration:none;
}
mark {
background-color:#fdfc9b;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
hr {
height:1px;
background: #9f9f9f;
margin: 7px 0;
border: none;
clear: both;
float: none;
width: 100%;
}
input, select {
vertical-align:middle;
}
select {
border-radius: 4px;
border: 1px solid #ACACAC;
padding: 3px 4px;
}
.clear {
clear: both;
}
.clearfix:after {
display: block;
visibility: hidden;
content: ".";
clear: both;
text-indent: -9999px;
height: 0;
}
.remove-margin {
margin-right: 0 !important;
}
fieldset {
border: 1px solid #ccc;
margin: 0 0 1.4615em;
padding: 1.5385em;
}
table {
border-collapse:collapse;
border-spacing:0;
margin-bottom: 15px;
width: 100%;
}
th, tr, td {
vertical-align: middle;
}
.sticky-header th, .sticky-table th {
border-bottom: 3px solid #ccc;
padding-right: 1em;
text-align: left;
}
body {
margin:0 auto;
padding:0;
font-family:Tahoma,Georgia,Arial,sans-serif;
font-size:13px;
background:url(images/body_bg.png) repeat-x center top #fff;
line-height:1.5em;
}
a {
text-decoration: none;
color: #0593C7;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
a:hover {
text-decoration: none;
color: #0579A4;
}
p {
margin: 0 0 0.8em;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
h1,h2, h3, h4, h5, h6 {
line-height:125%;
font-weight: normal;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 21px;
}
h3 {
font-size: 19px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
.clear {
clear:both;
}
/* The Outer cover */
#wrapper {
width:1000px;
margin:0px auto;
}
#content-container{
padding:0px;
width:100%;
}
/* TOP */
#header-top{
margin:0px auto;
position:relative;
height:100%;
}
.logo{
float: left;
width:300px;
}
.logo #logoimg {
float:left;
height: 55px;
margin:0;
padding:0 12px 0 0;
}
.logo #logoimg img{
width: 100%;
height: 100%;
}
.logo .sitename {
float:left;
}
.logo .sitename h1{
font-size:32px;
font-family:BebasNeueRegular,Arial, serif;
font-weight:normal;
margin: 10px 0;
}
.logo .sitename h1 a:link, .logo .sitename h1 a:visited{
color:#f25409;
}
.logo .sitename h1 a:hover{
color:#666;
}
.logo .sitename h2 {
color:#888;
font-size: 10px;
position: relative;
top: -18px;
font-weight:normal;
}
/* Social bookmarks */
.social-icons {
float: right;
margin-top: 10px;
}
.social-icons li {
float: left;
font-size: 11px;
margin: 3px 5px;
padding:0px;
text-transform: uppercase;
list-style: none;
}
/* PRIMARY NAVIGATION */
#menu-container{
height:55px;
text-transform:uppercase;
clear:both;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
padding: 0 0 0 10px;
background:#fff;
}
#main-menu {
float: right;
width:660px;
margin: 0 auto 0;
overflow: hidden;
}
#main-menu ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#main-menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
line-height:40px;
font-family:BebasNeueRegular,Arial, serif;
font-size:18px;
}
#main-menu li a {
color: #45565a;
display: block;
margin: 0;
padding: 8px 20px;
text-decoration: none;
position: relative;
border-right: 1px solid #E7EEF0;
}
#main-menu li:last-child a{
border:0;
}
#main-menu li a:hover, #main-menu li a:active, #main-menu .active-trail a, #main-menu li a.active {
color: #fff;
background: #fe5c11;
}
#main-menu li a.sf-with-ul {
padding-right: 10px;
}
#main-menu li a .sf-sub-indicator {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 19px;
right: 5px;
}
#main-menu li li a, #main-menu li li a:link, #main-menu li li a:visited {
background: #444;
color: #ddd;
width: 148px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 10px;
line-height:30px;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-transform: none;
position: relative;
font-size:12px;
}
#main-menu li li a:hover, #main-menu li li a:active {
background: #4a4a4a;
color: #fff;
}
#main-menu li li a .sf-sub-indicator {
top: 10px;
}
#main-menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 1px 0px 0px 0px;
padding: 0;
}
#main-menu li ul a {
width: 150px;
}
#main-menu li ul a:hover, #main-menu li ul a:active {
}
#main-menu li ul ul {
margin: -31px 0 0 169px;
}
#main-menu li:hover ul ul, #main-menu li:hover ul ul ul, #main-menu li.sfHover ul ul, #main-menu li.sfHover ul ul ul {
left: -999em;
}
#main-menu li:hover ul, #main-menu li li:hover ul, #main-menu li li li:hover ul, #main-menu li.sfHover ul, #main-menu li li.sfHover ul, #main-menu li li li.sfHover ul {
left: auto;
}
#main-menu li:hover, #main-menu li.sfHover {
position: static;
}
/* HOME PAGE */
#slider{
position:relative;
width:900px;
margin:50px auto 25px;
padding-bottom:20px;
}
#front-welcome{
text-align:center;
padding:20px 0 0 0;
font-family:"YanoneKaffeesatzRegular",arial;
margin-bottom:-30px;
}
#front-welcome .block > h2{
color:#282c2f;
font-size:28px;
margin:0px auto;
font-family:"YanoneKaffeesatzRegular",arial;
font-weight:normal;
text-transform: none;
}
#front-welcome p{
padding:10px 0px;
color:#282c2f;
line-height:22px;
font-size:18px;
font-family:"YanoneKaffeesatzRegular",arial;
}
/*------------------------------------------------*/
#page-container{
float: left;
margin: 0 auto;
width: 95%;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.not-front #page-container{
background: white;
padding: 20px;
border: 1px solid #DDD;
width: 100%;
}
#content {
display: inline;
margin: 0;
}
/* 3 columns */
body.two-sidebars #content {
float: left;
margin: 0 0 0 25px;
padding: 0;
width: 495px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #content {
float: right;
margin: 0;
padding: 0;
width: 725px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #content {
float: left;
margin: 0;
padding: 0;
width: 675px;
}
body.two-sidebars #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 200px;
}
/* 3 columns: sidebar-second */
body.two-sidebars #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 200px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 200px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 200px;
padding-left: 20px;
min-height: 330px;
-webkit-box-shadow: -2px 1px 2px #DDD;
-moz-box-shadow: -2px 1px 2px #DDD;
-o-box-shadow: -2px 1px 2px #DDD;
box-shadow: -2px 1px 2px #DDD;
}
.node {
margin-bottom: 20px;
padding-bottom: 20px;
}
#preface-wrapper {
margin: 0 auto;
}
#preface-wrapper .column {
float: left;
}
#preface-wrapper.in1 .column {
width: 100%;
}
#preface-wrapper.in2 .column {
width: 50%;
}
#preface-wrapper.in3 .column {
width: 33.3%;
}
#preface-wrapper .block {
padding-left: 15px;
padding-right: 15px;
}
#bottom-wrapper {
margin: 10px auto 0;
text-align: left;
width: 930px;
}
#bottom-wrapper .column {
float: left;
padding-bottom: 15px;
}
#bottom-wrapper.in1 .column {
width: 100%;
}
#bottom-wrapper.in2 .column {
width: 50%;
}
#bottom-wrapper.in3 .column {
width: 33.3%;
}
#bottom-wrapper.in4 .column {
width: 25%;
}
#bottom-wrapper .block {
padding-left: 15px;
padding-right: 15px;
}
.bottom{
clear: both;
background:#f4f4f4;
padding:10px 0px;
}
.bottom-container{
margin: auto;
width: 930px;
}
.bottom-container .column {
float: left;
}
.bottom-container.in1 .column {
width: 100%;
}
.bottom-container.in2 .column {
width: 50%;
}
.bottom-container.in3 .column {
width: 33.3%;
}
.bottom-container .block {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.bottom-container p{
padding:5px 0px;
color:#555;
line-height:20px;
}
#footer{
float: left;
padding:10px 0px;
overflow:auto;
font-family:Arial;
color:#777;
background: #d9e0e3;
border:1px solid #cfd7db;
width: 100%;
}
#footer #block-system-powered-by{
margin: 10px 0 0 0;
}
.footer_wrapper{
width: 930px;
margin: 0 auto;
overflow: hidden;
}
.credit{
float:right;
margin:10px 0px;
}
.copyright{
float:left;
margin:10px 0px;
width:400px;
}
.block > h2{
font-family:BebasNeueRegular,Arial, serif;
padding: 0px 0px 4px 0px;
color:#555;
font-size:24px;
font-weight:normal;
margin:5px 0px;
text-transform:uppercase;
border-bottom: 1px solid #ccc;
}
.sidebar .block{
float:left;
width:200px;
font-size:12px;
margin:0px 0px 30px 0px;
display:inline;
overflow:hidden;
}
.block{
margin:0px 0px 30px 0px;
overflow: hidden;
}
.node h2.title, #page-title{
color: #555555;
font-family: BebasNeueRegular,Arial,serif;
font-size: 24px;
font-weight: normal;
padding: 0 0 10px;
}
.node h2.title a{
color: #555555;
}
.content {
color: #333333;
}
/* Slideshow */
#slideshow {
position: relative;
width: 100%;
overflow: hidden;
margin: 20px 0 40px 0;
float: left;
}
#slides {
clear: both;
position: relative;
width: 900px;
margin: auto;
}
.slides_container {
width: 841px;
height: 320px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid white;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 26px #999;
-moz-box-shadow: 0px 0px 26px #999;
-o-box-shadow: 0px 0px 26px #999;
box-shadow: 0px 0px 26px #999;
}
.slides_container a,
.slides_container img {
display: block;
width:840px;
}
#slides .next,
#slides .prev{
position: absolute;
top: 127px;
left: -21px;
width: 78px;
height: 83px;
margin: 0;
background: url(images/slider_arrow.png) -10px -23px;
z-index: 10;
}
#slides .prev{
left: 833px;
background: url(images/slider_arrow.png) -10px 119px;
}
.slides_nav {
display: block !important;
}
#slides ul.pagination {
border: 0;
position: absolute;
z-index: 10;
margin: -25px 0 0 15px;
bottom: 16px;
right: 32px;
}
#slides ul.pagination li {
float:left;
margin: 0 10px 0 0;
list-style:none;
}
#slides ul.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background: url(images/slides_arrows.png) 0 160px;
float:left;
overflow:hidden;
}
#slides ul.pagination li.current a {
background: url(images/slides_arrows.png) 188px 160px;
}
.submitted {
padding: 4px 9px 4px 0px;
border-radius: 4px;
color: #fe5c11;
clear: both;
display: block;
font-size: 11px;
margin-bottom: 2px;
font-style: italic;
}
footer .links{
font-size: 12px;
}
.links {
color: #000;
margin-top: 10px;
font-size: 14px;
}
.links li a {
background: #C0D8DD;
display: inline-block;
padding: 2px 5px;
border-radius: 4px;
color: #383838;
font-weight: normal;
margin-bottom: 2px;
}
.links li a:hover {
color: #B81007;
}
.content ul, .content ol {
padding-left:20px;
}
.content table {
background: #ececec;
border: 1px solid #bbbbbb;
}
.content th {
background: #dbdbdb;
padding: 5px 4px;
text-shadow: 1px 1px #fff;
border-right: 1px solid #c8c7c7;
}
.content td {
background: #ebebeb;
color: #747474;
text-align: left;
padding-left: 4px;
border-right: 1px solid #c8c7c7;
border-bottom: 1px solid #c8c7c7;
}
/*-------------------------------------------*
/* Fix CKEditor style
/*-------------------------------------------*/
#content-container table.cke_editor {
background: transparent;
border: 0;
}
#content-container table.cke_editor td {
background: transparent;
padding: 0;
border: 0;
}
/*-------------------------------------------*
/* Poll, Buttons, Form
/*-------------------------------------------*/
.poll .vote-form .choices .title {
font-size: 14px;
font-weight: normal;
line-height: 2;
}
.poll .vote-form .choices {
margin: 0;
}
input.form-checkbox, input.form-radio {
vertical-align: baseline;
}
.form-text {
border-radius: 3px;
border: 1px solid #acacac;
padding: 4px 5px;
}
/*-------------------------------------------*
/* Menus and item lists
/*-------------------------------------------*/
.item-list ul {
margin: 0;
padding: 0 0 0 1.5385em;
}
.item-list ul li {
margin: 0;
padding: 0;
}
ul.menu li {
margin: 0;
padding: 0;
}
ul.inline {
clear: both;
}
ul.inline li {
margin: 0;
padding: 0;
}
/*-------------------------------------------*
/* Admin Tabs
/*-------------------------------------------*/
.tabs-wrapper {
border-bottom: 1px solid #b7b7b7;
margin: 0 0 5px 0;
}
ul.primary {
border: none;
margin: 0;
padding: 0;
}
ul.primary li a {
background: none;
border: none;
display: block;
float: left;
line-height: 1.5385em;
margin: 0;
padding: 0 1em;
border-radius: 4px 4px 0 0;
margin-right: 5px;
}
ul.primary li a:hover, ul.primary li a.active {
background: #666;
border: none;
color: #fff;
}
ul.primary li a:hover {
background: #888;
text-decoration: none;
}
ul.secondary {
background: #666;
border-bottom: none;
clear: both;
margin: 0;
padding: 0;
}
ul.secondary li {
border-right: none;
}
ul.secondary li a, ul.secondary li a:link {
border: none;
color: #ccc;
display: block;
float: left;
line-height: 1.5385em;
padding: 0 1em;
}
ul.secondary li a:hover, ul.secondary li a.active {
background: #888;
color: #fff;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: none;
}
/*-------------------------------------------*
/* Tabs and Tags
/*-------------------------------------------*/
.field-name-field-tags {
margin: 0 0 10px 0;
}
.field-name-field-tags a{
display: inline-block;
background: rgb(235, 235, 235);
padding: 1px 5px;
height: 22px;
color: #333;
text-shadow: 1px 1px #fff;
border-radius: 2px;
font-size: 12px;
}
.field-name-field-tags a:hover{
color: #205194;
}
.field-name-field-tags .field-item {
margin: 0 1em 0 0;
}
.field-name-field-tags div {
display: inline;
}
#content-container .field-label{
}
#content-container .field-items .field-item{
}
/*-------------------------------------------*
/* Profile
/*-------------------------------------------*/
.profile {
margin: 1.5385em 0;
}
.profile dd {
margin-bottom: 1.5385em;
}
.profile h3 {
border: none;
}
.profile dt {
margin-bottom: 0;
}
.password-parent {
width: 36em;
}
/*-------------------------------------------*
/* comment
/*-------------------------------------------*/
#comments {
clear: both;
margin-top: 14px;
padding: 10px;
border: 1px solid #dddddd;
border-radius: 8px;
background: rgb(253, 253, 253);
}
.comment {
margin-bottom: 1.5em;
padding: 5px;
border-radius: 7px;
min-height: 150px;
border-bottom: 1px solid #d9d9d9;
}
h3.comment-title a{
margin-bottom: 5px;
font-size: 16px;
color: #67696d;
}
.comment .new {
color: red;
text-transform: capitalize;
margin-left: 1em;
}
.form-textarea-wrapper textarea {
border-radius: 3px;
border: 1px solid #acacac;
}
.comment .submitted {
display:inline;
background: #e5e5e5;
}
.comment .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
.comment-new-comments{
display: none;
}
/*-------------------------------------------*
/* Navigation
/*-------------------------------------------*/
.item-list .pager {
}
.item-list .pager li {
background: #cfcfcf;
border-radius: 3px;
margin-right: 4px;
text-shadow: 1px 1px #fff;
}
/*-------------------------------------------*
/* Forum
/*-------------------------------------------*/
.field-name-taxonomy-forums div {
display: inline;
margin-top: 4px;
}
.field-name-taxonomy-forums .field-items {
}
#forum .title {
font-size: 16px;
}
#forum .submitted {
font-size: 12px;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
background: transparent;
padding: 0;
}
#forum .container {
background: #a1a1a1;
color: #fff;
}
.....end...
Change Line 371 in /sites/all/classic-theme/style.css
background: #fe5c11;
to whatever color you like.

My links shift to the left when clicked

I'm designing a website and having a problem with my links. When I click on them they shift to the left. Sometimes this prevents them from actually being clickable. I have not been able to find a single solution through googling and have no idea what part of my code is causing this. Any help would be appreciated.
Website
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #151515;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #F9F9F9;
font-style: normal;
font-variant: normal;
font-weight: lighter;
font-size: small;
list-style-type: none;
text-align: center;
}
#header {
background-color: #171717;
float: left;
text-align: center;
height: 75px;
width: 100%;
}
#header1 {
padding-top: 21px;
background-color: #171717;
width: 20%;
float: left;
text-align: center;
}
#header2 {
background-color: #171717;
float: left;
text-align: center;
width: 20%;
padding-top: 33px;
font-size: 11px;
}
#header2 ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-color: undefined;
font-size: small;
}
#header2 a {
width: 20%;
display: block;
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #CCCCCC;
}
#header2 a:hover , a:active, a:focus{
text-decoration: none;
color: #ffffff;
float: left;
}
#header3 {
float: left;
width: 20%;
text-align: center;
font-size: 11px;
padding-top: 23px;
font-weight: bold;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
#search {
width: 15%;
}
#search input[type="text"] {
background-repeat: no-repeat;
background-position: 10px 6px;
background-image: url(https://gray.secure-host.com/thefilterconnection/shopsite_sc/store/html/media/search-dark.png);
background-color: #909090;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #CCCCCC;
padding-top: 6px;
padding-bottom: 6px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
padding-left: 35px;
}
#header4 {
width: 20%;
text-align: center;
float: left;
padding-top: 16px;
font-size: 11px;
font-weight: bold;
color: #CCCCCC;
}
#header5 {
width: 20%;
background-color: #171717;
text-align: center;
padding-top: 13px;
font-size: 11px;
font-weight: bold;
float: left;
color: #CCCCCC;
}
#productmenucontainer {
background-color: #171717;
width: 100%;
clear: both;
float: center;
height: 30px;
}
#productmenu {
width: 100%;
background-color: #171717;
padding-top: 3px;
text-align: center;
right: auto;
left: auto;
max-width: 100%;
}
#container1 {
float: left;
width: 100%;
background-color: #EBEBEB;
position: relative;
right: 75%;
}
#container2 {
float: left;
width: 100%;
background-color: #FFFFFF;
overflow: hidden;
position: relative;
}
#container3 {
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
clear: left;
float: none;
display: inline-block;
-webkit-box-shadow: 1px 1px 5px 1px #DBDBDB;
box-shadow: 1px 1px 5px 1px #DBDBDB;
width: 100%;
}
#sidebar1 {
float: left;
width: 17%;
position: relative;
left: 75%;
padding-left: 4%;
padding-top: 2%;
text-align: left;
padding-bottom: 2%;
padding-right: 4%;
}
#sidebar1 ul {
list-style-type: none;
margin-left: -25px;
margin-top: 2px;
float: left;
width: 100%;
text-align: left;
}
#main {
float: left;
width: 64%;
position: relative;
left: 75%;
padding-left: 4%;
padding-top: 2%;
padding-bottom: 2%;
padding-right: 4%;
}
#footer {
background-color: #F9F9F9;
font-weight: lighter;
padding-top: 4px;
font-size: 11px;
text-align: center;
clear: left;
padding-bottom: 4px;
color: #6C6C6C;
min-width: 740px;
max-width: 1000px;
width: 100%;
margin-right: auto;
margin-left: auto;
position: relative;
display: inline-block;
}
#disclaimer {
text-align: center;
float: left;
width: 23%;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 1%;
padding-right: 1%;
}
#creditcards {
width: 35%;
float: left;
padding-top: 5px;
}
#share {
width: 20%;
text-align: center;
float: left;
padding-top: 5px;
}
#follow {
float: left;
padding-top: 5px;
width: 20%;
}
#copyright {
clear: left;
float: left;
text-align: center;
padding-top: 5px;
width: 100%;
background-color: #626262;
color: #F3F3F3;
font-size: x-small;
font-weight: bold;
font-style: italic;
}
a:link {
color: #575757;
text-decoration: none;
font-weight: bold;
font-size: small;
}
a:visited {
color: #6C6C6C;
}
a:hover, a:active, a:focus {
text-decoration: none;
color: #7F7F7F;
}
.menu {
background-color: #B1CCE0;
text-align: center;
width: 100%;
min-width: 740px;
max-width: 1000px;
left: auto;
right: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
.menu > span {
display:inline-block;
margin:0 auto;
}
#nav {
display: inline;
text-align: left;
position: relative;
list-style-type: none;
z-index: 1000;
}
#nav > li {
float: left;
padding: 0;
position: relative;
color: #6C6C6C;
}
#nav > li > a {
border: 1px solid transparent;
color: #CCCCCC;
display: block;
font-size: small;
padding: 3px 10px;
position: relative;
text-decoration: none;
font-weight: bolder;
-webkit-box-shadow: 0px 0;
box-shadow: 0px 0;
text-shadow: 0px 0;
}
#nav > li > a:hover {
background-color: #e4ecf4;
border-color: #999;
}
#nav > li.selected > a {
background-color: #171717;
border-color: #999999 #999999 #FFFFFF;
z-index: 2;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color: #FFFFFF;
border: 1px solid #999999;
padding: 12px 0;
display: none;
margin: 0;
position: absolute;
top: -1px;
z-index: 1;
width: 190px;
}
#nav li div div.wrp2 {
width: 380px;
background-color: #171717;
}
#nav .sep {
left:190px;
border-left:1px solid #E3E3E3;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 170px;
float: left;
list-style-type: none;
background-color: #171717;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom: 1px solid #E3E3E3;
color: #4F87C5;
font-weight: bold;
margin: 0 5px 4px;
padding-bottom: 3px;
padding-top: 3px;
font-size: small;
}
#nav li div ul li h3 a {
color: #4F87C5;
font-weight: bold;
font-size: small;
}
#nav li div ul li h3 a:hover {
color: #89B3E1;
font-weight: bold;
font-size: small;
}
#nav li ul ul {
padding-top: 0;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
bottom: 8px;
}
#nav li ul ul li {
margin-bottom: 1px;
padding-top: 3px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px;
}
#nav li ul ul li a {
color: #CCCCCC;
display: block;
text-decoration: none;
font-size: 10px;
font-weight: bold;
}
#nav li ul ul li a:hover{
background-color: #171717;
color: #ffffff;
}
#header2 a:hover , a:active, a:focus{
text-decoration: none;
color: #ffffff;
**float: left;**
}
This is the part I'm most suspicious of. What happens without the float: left - or, if you apply it to those links in their original CSS rule, not the :active one?
You have an issue in your css file demopage.css on line 61, you need to remove a:active and a:focus from that declaration. Basically on every click on all a tags on your page they get a float: left value. So if you remove them from it everything will work perfectly :)
I have tested it on your site and it works :)
So from this
#header2 a:hover, a:active, a:focus {
text-decoration: none;
color: #ffffff;
float: left;
}
to this
#header2 a:hover {
text-decoration: none;
color: #ffffff;
float: left;
}

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.
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.

Resources