I need background-color for comment - css

I have 2 comments on http://11klassniki.ru/post_ccuz.php?id_ccuz=19. One of them is reply for first comment.
He has
#commentRoot li
{
margin: 7px 0 7px 10px;
}
I tried to give him
background-color:blue;
but this color reflect for all comments. I need to give background-color only for replies.
css
ul
{
list-style-type: none;
width: 700px;
}
#commentRoot li
{
margin: 7px 0 7px 10px;
}
#commentRoot li a
{
margin-left: 500px;
}
#commentRoot li .commentContent
{
border: solid 1px #ccc;
padding: 5px 10px;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
margin: 5px 10px;
}
#commentRoot li h6
{
color: #085991;
}
#commentRoot li h6 span
{
color: #666; font-size: 11px;
margin-left: 20px;
}
#commentRoot li .comment
{
margin-top: 5px;
}
#commentRoot li a.reply
{
font-size: 11px;
}
/* Формочка */
#newComment, .loader {display: none;}
#cancelComment
{
float: right; width: 20px; color: red; cursor: pointer;
}
#newComment input
{
height: 26px; width: 250px; padding: 0 5px ; margin-left: 50px;
border: solid 1px #ccc;
}
#newComment textarea
{
width: 350px; height: 100px; margin-left: 5px;
vertical-align: middle; border: solid 1px #ccc;
}
#newComment button
{
margin-left: 102px; margin-top: 10px;
}

You could do something like (check JSFiddle here)
#commentRoot li .commentContent {
border: none;
padding: 5px 10px;
margin: 5px 10px;
}
#commentRoot li ul li .commentContent {
border: solid 1px #ccc;
padding: 5px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 5px 10px;
}

you can try use specificity of the elements, like this:
#commentRoot li ul .commentContent {
background-color: blue;
}
Look a demo here: http://jsfiddle.net/LaLc4ryb/

Related

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.

float next div wraps around

I'm having problem with this style, the content body wraps around the menu bar, I've tried removing the float but nothing happens.
.menu {
float: left;
padding: 0;
width: 100%;
margin: 0 0 1em 0;
}
.menu ul {
width: 1100px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.menu li {
float: left;
}
.menu li a {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
padding: 2px 10px;
text-decoration: none;
}
.menu a:hover {
color: #FFFFFF;
border-radius: 5px;
border-style: solid;
border-color: #666666;
border-left: 1px;
border-right: 1px;
box-shadow: #333 3px 3px 4px;
}
.content {
width: 1100px;
margin: 0 auto;
}
the content writes next the last link.
You don't have any clear in your CSS. Make sure that the first element after the floating div gets cleared.

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.

Css Menu Aligment

Hi i have a simple question, what am i doing that is doubling the height of the menu bar and applying it to the area bellow it?
Simple enough thanks again
http://www.mcdanielstudio.com/
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
#main_content {
clear: both;
margin-top: 0px;
border-left-color: #000000;
border-left-style: dashed;
border-left-width: 2px;
margin: 0px;
border-bottom: 0px;
border-right: 0px;
border-top: 0px;
border-left: 0px;
float: left;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;
padding-bottom: 3em;
}
Remove margin-bottom:3em from your #nav
You have a 3em bottom margin on #nav.

Having trouble with clear: both:

At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx

Resources