The following creates a table like structure.
As you will see in the FIDDLE the height of the first <li> is not counted. Why is this.
http://jsfiddle.net/CaqCg/5/
.ui .form {
display:block; position:relative; clear:both;
}
.ui .padd {
padding:20px; display:block;
}
.ui .form.boxstyle .text {
padding:0 5px 10px 5px;
}
.ui .form.boxstyle ul {
border:1px solid #DDD; border-radius:10px; background:#FAFAFA; margin:10px 0 10px 0; box-shadow:inset 0 0 10px rgba(100,100,100,0.1); display:block; position:relative; clear:both;
}
.ui .form.boxstyle li {
border-bottom:1px solid #DDD; display:block; clear:both; position:relative;
}
.ui .form.boxstyle li span:first-child {
float:left; display:block; width:-webkit-calc(35% - 20px); width:-moz-calc(35% - 20px); width:calc(35% - 20px); padding:12px 10px 9px 10px; font-size:12px; line-height:16px; height:16px; text-indent:6px; vertical-align:top;
}
.ui .form.boxstyle li span:nth-child(2) {
float:right; display:block; width:-webkit-calc(65% - 34px); width:-moz-calc(65% - 34px); width:calc(65% - 34px); padding:11px 10px 9px 10px; font-size:12px; line-height:16px; min-height:16px; border:solid #DDD; border-width:0 1px 0 1px; background:#FFF;
}
.ui .form.boxstyle li:last-child {
border-bottom:0px;
}
.ui .form.boxstyle label {
width:100%; font-size:12px; color:#555; text-shadow:0 1px #FFF;
}
.ui .form.boxstyle input, .ui .form.boxstyle textarea {
height:16px; display:block; color:#555; border:none; box-shadow:none; outline:none; line-height:16px; margin:0; width:100%; display:block; appearance:normal; padding:0;
}
Add overflow: hidden to the ul: http://jsfiddle.net/CaqCg/6/
The ul is collapsing because of the floated elements inside it.
Update: added overflow: hidden to the lis too, since they were also collapsing: http://jsfiddle.net/CaqCg/13/
Related
I am making a fancy CSS theme for my tumblr. But my vertical scrollbar has vanished, and pressing "page down" has no effect. It is like the lower half of my page no longer exists, or the page is forced to be the size my browser window is. Indeed - if I resize my browser window, suddenly I see that amount of content and can't scroll down to see the stuff I could see a moment ago.
I have read some things on the internet already to solve this problem, such as adding "overflow:auto" or "overflow:scroll", but either I have have added them in the wrong place or they do not solve the problem I have. I have also tried manually adding a scrollbar in the html {} tag. If I do that, the scrollbar reappears - but it doesn't actually work. It appears all blocked in gray, as if you are already viewing the whole page, while displaying my content cut-off.
Very frustrated as the page is, apart from this, done. Any obvious ideas?
<!--CSS customization here. -->
<style type="text/css">
html {overflow-y: scroll;}
#text {
margin-bottom:50px;
margin-top:100px;
margin-top:5px;
text-transform:uppercase;
font-size:1em;
font-famiy:serif;
letter-spacing:2px;
text-align:center;}
/*main structure*/
blockquote {
padding:5px 0 5px 30px;
border-left:1px solid #eee;
margin:10px 30px;
overflow: auto;
}
body {
background-repeat:repeat-y;
background-size: cover;
font-family:serif;
font-weight:100;
font-size:1em;
text-align:left;
margin:0;
line-height:18px;
overflow:auto;
}
a {
color:black;
text-decoration:none;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s; }
a:hover {
color:#45b69d;
}
img{
border:1px solid #fff;
border-radius:6px;
}
p {
margin-top:5px;
margin-bottom:5px}
#divider{
top:25px;
left:305px;
position:fixed;
width:420px;
position:absolute;
}
#dividerr{
bottom:20px;
left:37px;
width:420px;
position:fixed;
}
/*container*/
#con {
width:80%;
margin:0 10%;
position:fixed;
overflow:auto;
}
/*posts*/
.posts {
width:45%;
height:300px;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
#image {
position:absolute;
padding-top:8px;
padding-left:5px;
margin-right:5px;
}
#image img {
width:190px;
border:1px solid #fff;
border-radius:6px;
margin-right:8px;
}
.info {
margin-left:205px;
width:65%;
text-transform:none;
}
.tit {
font-weight:bold;
text-align:right;
font-family:georgia;
color:#ffa79b;
font-size:1.5em;
letter-spacing:1px;
text-transform:uppercase;
}
.lank {
border-bottom:1px dashed #ffcec7;
margin-bottom:5px;
padding-bottom:5px;}
.about ul {margin-left:-10px}
.quest {
font-size:1.25em;
font-family:Helvetica;
font-variant:small-caps;
}
.answ {
margin-top:10px;
margin-left:40px;
font-family:Georgia;
}
.grave {
text-align:center;
font-weight:bold;
margin-top:10px;
font-family:georgia;
font-size:1.5em;
letter-spacing:1px;
font-style:italic;
color:#cdba96;
}
.credit {
width:45%;
height:auto;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
/*header*/
.headertext {
color:beige;
font-size:6em;
letter-spacing:1em;
text-align:center;
font-family:Helvetica,sans-serif;
line-height: 80%;
height: auto;
}
.l {
background:#fff;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:2px;
text-align:center;
font-family:inconsolata;
text-transform:uppercase;
border:1px solid #ffcec7;
border-radius:6px;
}
#title {
width:50%
font-size:14px;
margin:auto 0;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:#ffcec7;
background:#f8f8f8;
padding:15px;
border-bottom:1px solid #eee;}
.links {
color:#ffa79b;
font-family:georgia;
padding-top:10px;
text-align:center;
padding-bottom:5px;
border-bottom:1px dashed #ffcec7;
}
.links a {
margin:10px 5px;
padding:2px 5px;
border:none;
}
.links a:hover {
background:#f8f8f8;
border-radius:6px;
}
.desc {
text-transform:none;
margin:10px 25px;
font-family:Georgia;
}
Alrighty, so I managed to fix the thing by taking one element at a time. The problem was in
container {position:fixed;}
but I'm not sure why. I was using the position:fixed to center my background. Leaving this in case it helps someone in future.
This is my problem:
If i used standart pictures and description (like picture 1) - i have good appearance of the site. But when I use the data from the database, the block catalog moves down the left (picture 2).
The code is the same in both cases, but the appearance is very different
#wrapper {
margin-top:40px;
width: 1200px;
margin: 0 auto;
height: auto !important;
}
#category
{
padding:10px 10px 10px 20px;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
width:200px;
clear:both;
display:block;
}
#category ul li{
word-wrap: break-word;
list-style-image: url(/neoshop/images/check.png);
padding:10px 0px 10px 10px;
border-bottom:1px dotted #cccccc;
}
#category ul li:last-child{
border-bottom:0px dotted #cccccc;
}
#category ul li a{
font:15px/1.3 "Arial", Arial,Helvetica, sans-serif;
margin-top:0px;
font-weight:100;
display:block;
color:#2f3638;
text-decoration:none;
line-height:20px;
}
#category ul li a:hover{
color:#0bb1e8;
}
#category ul ul a{
list-style-image:none;
color:#8b8b8b;
background:#fff;
}
#category ul ul{
margin-top:5px;
display:none;
color:#8b8b8b;
background:#fff;
}
#category ul ul li{
word-wrap: break-word;
list-style-image: none;
padding:10px 0px 10px 10px;
border-bottom:1px dotted #cccccc;
}
.catalog
{
margin-left:12px;
float:left;
width:948px;
}
.product-main
{
width:236px;
height:285px;
float:left;
}
.product{
border-right:1px dotted #cccccc;
padding:0 15px;
}
.product h2{
color:#111017;
text-align:center;
font:bold 14px/1.3 Tahoma;
margin:0 0 15px 0;
}
.product h3{
color:#111017;
text-align:center;
font:bold 12px/1.3 Tahoma;
margin:0 0 15px 0;
}
.product-img{
text-align:center;
}
.product-img img{
weight:114px;
height:112px;
}
.price{
font:13px/1.3 "Arial", Arial,Helvetica, sans-serif;
color:#0bb1e8;
}
.price span{
font:13px/1.3 "Arial", Arial,Helvetica, sans-serif;
color:#111017;
text-align:center;
}
.price a{
clear:both;
float:right;
}
.bot-dot
{
border-bottom:1px dotted #cccccc;
margin:20px;
}
.product-main:nth-child(4n) .product
{
border-right:none;
}
.product-main:last-child .product
{
border-right:none;
}
.product-main:nth-child(4n) .bot-dot
{
margin: 20px 0 20px 20px;
}
.product-main:nth-child(4n+1) .bot-dot
{
margin: 20px 20px 20px 0px;
}
It must be like this:
But i have this:
when the actual images are being loaded,
the total width of your catalog increases more than 948px and so it has to move to next line.
in
.product-img img{
weight:114px;
height:112px;
}
instead of width you have specified weight by mistake
I might be going about this the wrong way, but what I'm trying to achieve is a list style horizental that links in with some js that changes the navigation from one tab to another. The tab headings should have a counter before the text within a css circle using radius and I've got this far.
What I can't seem to resolve is how to then place this circle within a box the same colour as the li text background and ensure it changes colour when hovered/selected.
Here's my code so far:
OL.evotab {
counter-reset:li;
list-style: none;
float:left;
width:100%;
padding:0px;
}
OL.evotab LI {
list-style:none;
position:relative;
display: inline;
float:left;
margin:0 0 6px 2em;
padding:4px 8px;
}
ol.evotab > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-radius:50%;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
OL.evotab LI A {
background-color: #f8f8f8;
color: #28343d;
text-decoration: none;
padding-top: 30px;
padding-left:20px;
padding-right:20px;
padding-bottom:30px;
border-bottom:5px solid #dfdfdf;
}
OL.evotab LI A.selected,
OL.evotab LI A:hover {
background-color: #f8f8f8;
color: #e51f38;
padding-top: 30px;
padding-bottom:30px;
border-bottom: 5px solid #e51f38;
}
OL.evotab LI A:focus {
outline: 0;
}
FIDDLE
Its a little difficult to see what you mean without any HTML....but have a look at the fiddle linked for an idea.
HTML
<a href='#'>This is an Item</a>
CSS:
a {
background:grey;
border:1px solid black;
display:inline-block;
padding:20px;
color:white;
text-decoration:none;
position:relative;
}
a:before {
content:'7';
color:black;
position:absolute;
display:inline-block;
background:yellow;
border:1px solid black;
border-radius: 999px;
left:-5px;
width:20px;
text-align:center;
line-height:20px;
height:20px;
}
a:hover, a:hover:before {
color:red;
}
I have a footer on my page, where the content is placing correctly, under div#main (which includes div#left and div#right), but the background (the big blue thing) is placed way over div#main.
I have tried display:block and z-indexing the divs, to no avail.
Anyone have any idea what's going on?
Code:
body {
background:url(aaa-bg.jpg) repeat-x #e7e9e9;
margin:0;
padding:0;
color:#383838;
font:12pt verdana;
}
img {
border:0;
}
a:link {
color:#e29511;
text-decoration:none;
}
a:hover {
color:#e29511;
text-decoration:underline;
}
a:visited {
color:#808080;
}
/* header ------------------------------------------------------------------------------ */
#header {
margin:10px auto 10px;
width:800px;
height:97px;
}
/* nav ------------------------------------------------------------------------------ */
#nav {
width:800px;
margin:0px auto 3px;
height:30px;
}
#nav ul {
margin:0 0px 0px 0;
padding:0;
list-style:none;
}
#nav ul li {
width:140px;
height:20px;
padding:5px 0 5px 0;
float:left;
margin:0 10px 0 0;
background:#cdcdcd;
color:#000000;
position:relative;
z-index:99999;
text-align:center;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-top:3px solid transparent;
border-left:3px solid transparent;
border-right:3px solid transparent;
}
#nav ul li:hover {
cursor:pointer;
border-top:3px solid #e29511;
border-left:3px solid #e29511;
border-right:3px solid #e29511;
}
#nav ul li.home {
width:140px;
height:20px;
padding:5px 0 5px 0;
float:left;
margin:0 10px 0 0;
background:#cdcdcd;
color:#000000;
position:relative;
z-index:99999;
text-align:center;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-top:3px solid transparent;
border-left:3px solid transparent;
border-right:3px solid transparent;
}
#nav ul li.home:hover {
cursor:pointer;
-moz-box-shadow: 5px 5px 2px #656565;
-webkit-box-shadow: 5px 5px 2px #656565;
box-shadow: 5px 5px 2px #656565;
}
#nav ul li ul {
width:140px;
margin:5px 0 0 -3px;
float:left;
-moz-box-shadow: 5px 5px 2px #656565;
-webkit-box-shadow: 5px 5px 2px #656565;
box-shadow: 5px 5px 2px #656565;
background:url(aaa-navbg3.png) repeat-x #ffffff;
border-bottom:3px solid #e29511;
border-left:3px solid #e29511;
border-right:3px solid #e29511;
}
#nav ul li ul li {
width:140px;
font-weight:normal;
font-size:10pt;
background:none;
border-top:1px solid #808080;
border-left:none;
border-right:none;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
#nav ul li ul li:hover {
background:url(aaa-libg2.png) repeat-x;
border-top:1px solid #808080;
border-left:none;
border-right:none;
}
/* toppane ------------------------------------------------------------------------------ */
#toppane {
width:100%;
height:210px;
background:url(aaa-toppane3.jpg) repeat-x;
padding:20px 0 20px;
margin:0px 0 20px 0;
position:relative;
z-index:-1;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}
#toppane-inner {
width:800px;
height:210px;
margin:0px auto;
}
/* slideshow ------------------------------------------------------------------------------ */
#window {
clear:both;
width:800px;
height:210px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
#slideshow {
width:1600px;
height:420px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
#slideshow li {
width:800px;
height:210px;
float:left;
display:inline;
margin:0;
padding:0;
}
/* main ------------------------------------------------------------------------------ */
#main {
width:800px;
margin:5px auto;
padding:0px;
}
#left {
width:390px;
margin:0 20px 0 0;
padding:0px;
float:left;
}
#right {
width:390px;
font-size:11pt;
margin:0;
padding:0px;
float:right;
}
#right img {
margin:0 0 5px 0;
}
#right a:link {
text-decoration:none;
color:#383838;
}
#right a:hover {
text-decoration:none;
color:#383838;
}
#right a:visited {
text-decoration:none;
color:#383838;
}
h2 {
width:390px;
font:14pt verdana;
border-bottom:1px solid #383838;
margin:0 0 5px 0;
text-align:right;
}
.segment {
margin:0 0 40px 0;
}
#footer {
background:blue;
width:800px;
margin:30px auto;
color:#ffffff;
}
#footer table {
width:800px;
}
#footer tr {
width:800px;
}
#footer td {
width:200px;
}
Adding clear:left; to your footer solves this problem.
The issue you're seeing is that #left and #right both extend outside of the #main div since they're floating and nothing inside the #main div is clearing those floats.
The footer is then stacking vertically against the #main div which is not the same height as #left and #right.
One thing you can do to pull the main div down over the floated items is add something at the end of it to clear the floats. You can do this with CSS as follows:
#main:after{
content:".";
display:block;
clear:both;
visibility:hidden;
}
What you need to use is what's called a "clear fix". Things are overlapping because the browser doesn't know when to stop "floating" things, so to speak.
You can either:
a) Add after your main divs the following
<div style="clear: both;"> </div>
b) Add the clear: both style to your footer itself.
I need help to resolve validation css.
Here I got 20 same error in W3 validation. I am not understand properly.
If you resolve this issue so I would greatly appreciate you.
Error:
Same colors for color and background-color in two contexts
Here is CSS Code for your review:
#charset "utf-8";
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #222222;
text-align: left;
margin: 0px;
padding: 0px;
}
a {
text-decoration:none;
color:#222222
}
a:hover {
color:#29a1d6;
}
span.redclr {
color:#FF0000
}
.clr-blue {
color:#29a1d6
}
.clr-green {
color:#85be2e
}
.g-font-18px {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-style:italic
}
.img-brd-5px {
border:5px solid #f1f1f1;
padding:10px
}
p {
text-align:left;
margin:0px;
padding:0px 0px 8px 0px;
line-height:140%
}
p.pdg-btm-2px {
padding-bottom:2px
}
.textfield {
border:1px solid #cfe8f4;
padding:3px 5px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px
}
.textfield:hover {
border:1px solid #abd6eb;
background-color:#f2faff
}
.captcha {
border:1px solid #cfe8f4;
padding:3px 5px;
text-align:center;
color:#29a1d6;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
width:119px;
margin-left:5px
}
.captcha:hover {
border:1px solid #abd6eb;
background-color:#f2faff
}
.button-bg {
background:url(../images/btn-bg.jpg) repeat-x center top;
padding:0px;
margin:0px;
color:#FFFFFF;
height:28px;
font-size:14px;
font-weight:bold;
cursor:pointer;
border:0px solid #5fa000;
}
.button-bg:hover {
background:url(../images/btn-bg-hover.jpg) repeat-x center top;
border:0px solid #198dbf
}
.header1-brd-btm {
font-size:20px;
font-weight:bold;
color:#29a1d6;
text-align:left;
margin-bottom:10px;
padding-bottom:5px;
border-bottom:1px solid #cfe8f4
}
.green-header1-brd-btm {
padding:0px 0px 5px 0px;
font-size:18px;
color:#85be2e;
background:none;
font-weight:normal;
border-bottom:1px solid #cfe8f4;
margin-bottom:10px
}
.header-1 {
font-size:33px;
color:#ffffff;
padding:10px 0px 0px 0px;
text-shadow:2px 1px 0px #00648e;
}
.header-2 {
font-size:22px;
color:#29a1d6;
padding:0px 0px 5px 0px;
text-shadow:2px 2px 0px #f1f1f1;
font-weight:bold;
border-bottom:1px solid #cfe8f4;
margin-bottom:10px;
}
.header-3 {
font-size:18px;
color:#85be2e;
padding:0px 0px 5px 0px;
font-weight:bold;
margin-bottom:10px;
}
.header-3-bg {
font-size:18px;
color:#000000;
padding:5px 15px 7px 15px;
font-weight:bold;
margin-bottom:10px;
background-color:#f1f1f1;
overflow:hidden;
clear:left;
}
.text18pt {
font-size:18px;
text-align:left;
line-height:normal;
}
.top-bg {
background:url(../images/top-gradiant-bg.jpg) repeat-x center top;
height:86px;
width:100%;
}
.main {
width:950px;
margin:0px auto;
overflow:hidden;
border:0px solid #000000;
}
.logo {
width:300px;
overflow:hidden;
border:0px solid #000000;
margin-top:15px;
float:left
}
.header-right {
width:645px;
float:right;
border:0px solid #000000;
}
.toplink {
margin:10px 0px 0px 0px;
padding:0px;
text-align:right;
width:645px;
overflow:hidden
}
.toplink ul {
margin:0px;
padding:0px;
}
.toplink ul li {
margin:0px;
padding:5px;
list-style:none;
float:right;
font-size:14px;
font-weight:bold
}
.toplink ul li a {
color:#222222
}
.toplink ul li a:hover {
text-decoration:none;
color:#29a1d6
}
.top-navigation {
margin:20px 0px 0px 0px;
padding:0px;
border:0px solid #000000;
clear:both;
float:right
}
.top-navigation ul {
margin:0px;
padding:0px;
}
.top-navigation ul li {
margin:0px;
padding:0px 15px;
list-style:none;
float:right;
font-size:15px;
font-weight:bold
}
.top-navigation ul li a:hover {
text-decoration:none
}
.main-banner {
width:100%;
background:url(../images/main-banner-bg123.png) repeat-x;
margin:2px auto;
}
.middlebar-bg {
background:url(../images/middle-gradiant-bg.jpg) repeat-x center top;
width:100%;
}
.main3servicesbox {
width:960px;
margin:0px auto;
overflow:hidden;
}
.mainservices-box{
background:url(../images/main-box-bg.png) no-repeat left top;
width:280px;
height:180px;
float:left;
padding:20px 19px 0px 20px;
cursor:pointer
}
.mainservices-box:hover{
background:url(../images/main-box-bg-hover.png) no-repeat left top;
}
.mainservices-title {
font-size:16px;
font-weight:bold;
color:#29a1d6;
text-align:left;
border-bottom:1px solid #29a1d6;
padding-bottom:2px;
margin-bottom:10px
}
.mainservices-link {
margin:0px 0px 0px 0px;
padding:0px;
overflow:hidden;
}
.mainservices-link ul {
margin:0px;
padding:0px;
}
.mainservices-link ul li {
margin:0px;
padding:0px 0px 10px 18px;
list-style:none;
background: url(../images/bullet-small.gif) no-repeat 0px 4px;
font-size:13px;
font-weight:bold
}
.home-content-bg {
background:url(../images/homepage-content-bg.jpg) no-repeat left top;
width:915px;
height:257px;
padding: 20px 10px 0px 25px;
margin:5px 0px 10px 0px;
overflow:hidden
}
.capabilities {
padding:0px 0px 0px 0px;
margin:0px;
border:0px solid #000000;
width:205px;
float:left
}
.capabilities ul {
margin:0px;
padding:0px;
}
.capabilities ul li {
margin:0px;
padding:5px 0px 7px 18px;
list-style:none;
background:url(../images/bullet.gif) no-repeat 0px 9px;
border-top:1px solid #cfe8f4;
font-weight:bold
}
.capabilities ul li.title {
padding-left:0px;
font-size:18px;
border:none;
color:#85be2e;
background:none;
font-weight:normal;
padding-bottom:3px
}
.capabilities ul li a:hover {
text-decoration:none
}
.home-main-content-module {
border:0px solid #000000;
overflow:hidden;
float:left;
margin:0px 0px 0px 45px;
width:650px
}
.footer {
background-color:#f4f4f4;
border-top:2px solid #dfdfdf;
padding-bottom:20px;
margin-top:10px
}
.footerlink {
margin:10px 70px 0px 0px;
padding:0px;
border:0px solid #330000;
float:left
}
.footerlink ul {
margin:0px;
padding:0px;
}
.footerlink ul li {
margin:0px;
padding:0px 0px 4px 0px;
list-style:none;
font-size:12px;
}
.footerlink ul li b {
color:#222222
}
.footerlink ul li a {
color:#545454
}
.footerlink ul li a:hover {
text-decoration:none;
color:#29a1d6
}
.footer-getAquote {
border:0px solid #000000;
float:left
}
.socialMedia-icon {
margin:10px 0px 0px 0px;
padding:0px;
border:0px solid #000000;
overflow:hidden
}
.socialMedia-icon ul {
margin:0px 0px;
padding:0px;
}
.socialMedia-icon ul li {
margin:0px;
padding:0px 0px 0px 25px;
list-style:none;
float:left;
}
.copyrighttext {
width:100%;
height:23px;
background-color:#27a1d5;
color:#FFFFFF;
font-size:12px;
padding-top:13px;
text-align:center
}
/*** services page****/
.page-header-bg {
background: url(../images/page-header-bg.jpg) repeat-x center top;
height:63px;
width:100%;
margin:2px 0px
}
.breadcrumb-bg {
background-color:#ddf7ff;
width:100%;
padding:10px 0px;
margin-bottom:15px
}
.breadcrumb {
margin:0px;
padding:0px;
overflow:hidden;
}
.breadcrumb ul {
margin:0px;
padding:0px;
}
.breadcrumb ul li {
margin:0px;
padding:0px 1px;
list-style:none;
display:inline;
font-size:12px;
}
.breadcrumb ul li a:hover {
text-decoration:none
}
.leftbar {
width:225px;
float:left;
}
.rightbar {
width:700px;
float:left;
margin-left:25px
}
* html .rightbar {
width:698px;
float:left;
margin-left:25px
}
.left-module {
margin:0px 0px 20px 0px;
overflow:hidden
}
.leftbar-navigation {
width:225px;
overflow:hidden;
}
.leftbar-nav-bg-top {
background:url(../images/leftbar-top-bg.jpg) no-repeat 0px 0px;
height:20px
}
.leftbar-nav-bg-middle {
background:url(../images/leftbar-middle-bg.jpg) repeat-y center top
}
.leftbar-nav-bg-bottom {
background:url(../images/leftbar-bottom-bg.jpg) no-repeat 0px bottom;
height:15px;
}
.left-nav {
margin:0px auto;
padding:0px;
width:190px
}
.left-nav ul {
margin:0px;
padding:0px;
}
.left-nav ul li {
margin:0px;
font-size:12px;
list-style:none;
font-weight:bold;
border-top:1px solid #cfe8f4;
}
.left-nav ul li.title {
font-size:15px;
border:none;
padding-bottom:5px
}
.left-nav ul li a {
display:block;
cursor:pointer;
background:url(../images/bullet.gif) no-repeat left 10px;
padding:6px 0px 7px 20px;
}
.left-nav ul li a:hover {
text-decoration:none;
background:url(../images/bullet-12px-hover.gif) no-repeat left 9px;
}
.left-nav ul li.sublink {
border-top:0px;
font-weight:normal;
line-height:normal;
font-size:12px
}
.left-nav ul li.sublink a {
padding:0px 0px 4px 20px;
background-image:none;
}
.left-nav ul li.sublink a:hover {
text-decoration:none;
background:none
}
.leftbar-optin {
margin:0px 0px 0px 0px;
padding:0px;
width:225px;
}
.leftbar-optin ul {
margin:10px 0px 0px 0px;
padding:0px;
}
.leftbar-optin ul li {
margin:0px;
padding:0px 0px 3px 0px;
list-style:none
}
.leftbar-optin ul li .textfield {
width:213px;
}
.leftbar-optin ul li .textfield-h {
width:213px;
height:100px
}
.leftbar-optin ul li .textfield122 {
width:107px;
margin-left:5px
}
.leftbar-optin ul li .submit-btn {
width:225px;
text-align:center;
}
.left-testimonials {
margin:0px;
padding:0px;
}
.left-testimonials ul {
margin:0px;
padding:0px;
}
.left-testimonials ul li {
margin:0px;
padding:0px;
list-style:none;
line-height:140%
}
.left-testimonials ul li.text {
background:url(../images/quote.jpg) no-repeat 0px 0px;
padding:2px 15px 5px 0px;
text-indent:25px;
}
.left-testimonials ul li.boldtext {
color:#29a1d6;
font-size:14px;
font-weight:bold;
line-height:normal;
padding:5px 0px 0px 0px
}
.left-testimonials ul li .border {
border:1px solid #ececec;
margin-bottom:7px;
padding:0px 10px
}
/***rightbar***/
/****ecommerce solutions****/
.overview-key-module {
margin:10px auto 15px auto;
padding:0px;
border:0px solid #666666;
overflow:hidden
}
.overview-key {
width:210px;
border:0px solid #000000;
margin:0px 10px;
float:left;
}
* html .overview-key {
margin:0px 8px
}
.overview-key.overview-key1 {
background-color:#f9ecfe
}
.overview-key.overview-key2 {
background-color:#fef5e6
}
.overview-key.overview-key3 {
background-color:#fff0f3
}
.overview-key-header {
background:url(../images/overview-key-header.jpg) no-repeat;
width:210px;
height:110px;
}
.overview-key-header.overview-key-header1 {
background-position:0px 0px;
}
.overview-key-header.overview-key-header2 {
background-position:0px -120px;
}
.overview-key-header.overview-key-header3 {
background-position:0px -240px;
}
.key-features {
margin:10px 0px;
padding:0px;
}
.key-features ul {
margin:0px;
padding:0px;
}
.key-features ul li {
margin:0px;
padding:6px 0px 8px 15px;
list-style:none;
font-weight:bold;
}
.key-features ul li.keycolor1 {
background-color:#f6e4fe
}
.key-features ul li.keycolor2 {
background-color:#fcebd4
}
.key-features ul li.keycolor3 {
background-color:#fde4e6
}
.feature-point-module {
margin:0px 0px 25px 0px;
width:698px;
clear:left;
float:left;
}
.features-points {
margin:0px 0px 0px 20px;
padding:0px;
border:0px solid #000000;
width:500px;
float:left;
}
.features-points ul {
margin:0px;
padding:0px;
}
.features-points ul li {
margin:0px;
padding:0px 0px 5px 20px;
list-style:none;
background:url(../images/bullet.gif) no-repeat 0px 3px;
line-height:normal
}
.features-points ul li.subpoint {
background:url(../images/sub-bullet.jpg) no-repeat 22px 5px;
padding:0px 0px 3px 35px
}
.features-point-icon {
width:150px;
float:left;
margin-left:25px;
border:0px solid #000000;
}
.features-top {
font-size:12px;
font-weight:bold;
width:30px;
text-align:right;
background-color:#cfe8f4;
padding:5px 10px;
float:right;
margin-right:0px;
text-decoration:none
}
.features-top:hover {
text-decoration:none
}
.features-top-width {
width:698px;
}
.integration-module {
margin:0px 0px 40px 0px;
clear:both;
overflow:hidden
}
.ecommerce-logo {
width:150px;
height:75px;
border:1px solid #f1f1f1;
text-align:center;
float:left;
margin:0px 10px 20px 10px
}
* html .ecommerce-logo {
margin:0px 8px 20px 8px
}
.quicktour {
margin:0px auto;
padding:0px;
width:510px;
}
.quicktour ul {
margin:0px;
padding:0px;
}
.quicktour ul li {
margin:0px;
padding:0px 0px 15px 0px;
list-style:none;
text-align:center
}
.quicktour ul li img {
border:5px solid #f1f1f1;
padding:10px
}
* html .portfolio {
margin-right:8px;
margin-left:8px
}
.portfolio {
margin:10px 10px 20px 10px;
padding:0px;
float:left
}
.portfolio ul {
margin:0px;
padding:0px;
}
.portfolio ul li {
margin:0px;
padding:0px 0px 5px 0px;
list-style:none;
font-weight:bold;
text-align:center
}
.portfolio ul li img {
border:1px solid #f1f1f1;
padding:5px
}
.portfolio ul li img:hover {
border:1px solid #29A1D6;
padding:5px
}
.portfolio ul li a:hover {
text-decoration:none
}
.optin-form-module {
background-color:#f2fafe;
width:650px;
margin:0px auto 50px auto;
overflow:hidden;
border:1px solid #CFE8F4;
padding:0px
}
.optin-form {
margin:0px auto;
padding:0px 0px 20px 0px;
overflow:hidden;
width:600px;
border:0px solid #000000;
}
.optin-form ul {
margin:0px;
padding:0px;
}
.optin-form ul li {
margin:0px;
padding:0px 0px 3px 0px;
list-style:none;
float:left;
}
.optin-form ul li span {
color:#FF0000;
padding-left:5px;
vertical-align:top
}
.optin-form ul li.col1 {
width:255px;
line-height:normal;
padding:3px 10px 0px 0px;
text-align:right
}
.optin-form ul li.col2 {
width:335px;
}
.optin-form ul li.sub-col1 {
width:25px;
}
.optin-form ul li.sub-col2 {
width:305px;
line-height:150%;
}
.optin-form ul li .textfield {
width:300px
}
.optin-form ul li .textfield-h {
width:300px;
height:100px
}
.optin-form ul li .submit-btn {
width:233px;
}
.optin-form ul li.title {
border-bottom:1px solid #CFE8F4;
padding:20px 0px 5px 2px;
margin-bottom:10px;
width:600px;
font-size:18px;
}
.optin-form ul li.privacy {
background:url(../images/lock-icon.gif) no-repeat 20px 10px;
padding:10px 0px 0px 55px;
border-top:1px solid #CFE8F4;
margin-top:10px;
width:545px
}
/***** seo****/
.bullet-point-common {
margin:0px 0px 10px 0px;
padding:0px;
}
.bullet-point-common ul {
margin:0px;
padding:0px;
}
.bullet-point-common ul li {
margin:0px;
padding:0px 0px 5px 20px;
list-style:none;
background:url(../images/bullet.gif) no-repeat 0px 3px;
line-height:normal
}
.bullet-point-common ul li.subpoint {
background:url(../images/sub-bullet.jpg) no-repeat 22px 5px;
padding:0px 0px 3px 35px
}
.bullet-point-common ul li.title {
font-size:18px;
color:#29a1d6;
padding:0px 0px 3px 0px;
text-shadow:2px 2px 0px #f1f1f1;
font-weight:bold;
border-bottom:1px solid #cfe8f4;
margin:10px 0px;
background:none
}
.contactus-module {
border:0px solid #000000;
overflow:hidden;
}
.contact-adrs {
margin:10px 70px 0px 0px;
padding:0px;
float:left;
border:0px solid #000000;
}
.contact-adrs ul {
margin:0px;
padding:0px;
}
.contact-adrs ul li {
margin:0px;
padding:0px 0px 3px 0px;
list-style:none
}
.contact-adrs ul li img {
border:1px solid #dddddd
}
.contact-adrs ul li img:hover {
border:1px solid #abd6eb
}
.contactus-option-module {
overflow:hidden;
border:0px solid #000000;
margin:30px 0px 0px 0px;
clear:left
}
.contactus-optin {
margin:15px 0px;
padding:0px;
width:350px
}
.contactus-optin ul {
margin:0px;
padding:0px;
}
.contactus-optin ul li {
margin:0px;
padding:0px 0px 3px 0px;
list-style:none;
float:left;
width:350px
}
.contactus-optin ul li.col1 {
width:80px;
padding:5px 0px 0px 0px
}
.contactus-optin ul li.col2 {
width:250px;
}
.contactus-optin ul li .textfield {
width:225px;
}
.contactus-optin ul li .textfield-h {
height:100px;
}
.contactus-optin ul li span {
color:#FF0000;
padding:0px 0px 0px 5px;
vertical-align:top
}
.contactus-optin ul li .submit-btn {
width:238px;
}
.client-ranking-module {
margin:0px 0px 20px 0px;
padding:10px 0px 15px 15px;
border-top:0px solid #85be2f;
background-color:#f5f5f5
}
.client-ranking-module ul {
margin:0px;
padding:0px;
}
.client-ranking-module ul li {
list-style:none;
font-size:13px;
font-weight:bold;
padding:0px 0px 5px 0px
}
.client-ranking-module ul li.screenshort {
border:1px solid #dddddd;
width:665px;
padding-top:5px
}
/***** tstimonials********/
#testimonials {
border-bottom:1px dotted #8ecae7;
margin-bottom:20px;
padding-bottom:20px;
clear:left;
overflow:hidden
}
#testimonials p.title {
font-size:14px;
font-weight:bold;
color:#29a1d6;
padding-bottom:0px;
line-height:normal
}
#testimonials p .text {
font-size:13px;
color:#222222;
font-weight:normal
}
/**** careers****/
.apply-now{
background:url(../images/apply-now.jpg) no-repeat left top;
width:510px;
margin:20px auto;
height:47px;
font-size:16px;
padding: 6px 0px 0px 190px;
display:block;
color:#FFFFFF;
font-weight:bold
}
.apply-now:hover {
color:#ffffff;
text-decoration:none
}
/****** portfolio*****/
#portfolio-main {
border:0px solid #000000;
overflow:hidden;
clear:left;
float:left;
margin-bottom:30px;
width:700px
}
.ecommerce-box {
border:1px solid #CFE8F4;
background-color:#f2faff;
padding:10px 15px;
margin-bottom:10px
}
.casestudy-mrgn {
margin:20px 0px 5px 0px
}
.caseStudy-img {
float:right;
margin:0px 0px 10px 10px;
border:2px solid #f1f1f1;
padding:5px
}
.caseStudy-table{
margin:8px 0px 10px 0px;
padding:0px;
border:1px solid #cccccc;
border-bottom:none;
width:698px;
overflow:hidden
}
.caseStudy-table ul{
margin:0px;
padding:0px;
}
.caseStudy-table ul li{
margin:0px;
float:left;
line-height:200%;
list-style:none;
padding-left:8px;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
.caseStudy-table ul li.col1{
width:123px;
}
.caseStudy-table ul li.col2{
width:190px;
}
.caseStudy-table ul li.col3{
width:180px;
}
.caseStudy-table ul li.col4{
width:170px;
border-right:0px;
}
.caseStudy-table ul li.backgrnd {
background:#f6f6f6;
color:#222222
}
.caseStudy-table ul li.boldtext {
background-color:#29A1D6;
color:#FFFFFF;
font-weight:bold
}
Well, the CSS validator shows you at which line the error/warning is, so that is already a start.
Now to what (example)
Same colors for color and background-color in two contexts .caseStudy-table ul li.boldtext and a:hover
means:
Your background color is the same as the text color. The validator shows a warning because it might not be possible to read the text. (Ever try to read white text on white background?)
.caseStudy-table ul li.boldtext {
background-color : #29a1d6; /* background-color */
color : #ffffff;
font-weight : bold;
}
a:hover {
color : #29a1d6; /* text color */
}
If you don't have a link in .caseStudy-table ul li.boldtext then it is ok. That is why the message is a warning and not an error.
The nasty thing here is that the mentioned color is used in the hover pseudo class for anchors, globally, so whenever you move your mouse over a link in the caseStudy-list-"context", it hides.