setting div to 100% still not working

setting div to 100% still not working - css

None of the div elements on my page seem to be adjustable to 100% height. I've been trying since last night. Any help would be appreciated. Thanks.
<style type="text/css">
html, body {
height: 100%;
background-color: #E1E1E1;
}
body, td, th {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
</style>
<style type="text/css">
<!--
/* ~~ this fixed width container surrounds all other divs~~ */
.container {
width: 965px;
height: 100%;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}
.sidebar1 {
float: left;
width: 200px;
padding-bottom: 10px;
min-height: 100%;
}
.content {
padding: 10px 0;
width: 380px;
background: #fcfcfc;
float: left;
height: 100%;
position: relative;
}
.content2 {
float: left;
width: 380px;
background: #fcfcfc;
padding: 10px 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The footer styles ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="container_8 clearfix">
<h1 class="grid_1"><img src="resources/img/kite2.png" width="35" height="16"></h1>
<nav class="grid_5">
<ul class="clearfix">
<li class="fr">administrator<span class="arrow-down"></span>
<ul>
<li>Account</li>
<li>Users</li>
<li>Groups</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</nav>
<form class="grid_2">
<input class="full" type="text" placeholder="Search..." />
</form>
</div>
</header>
<section>
<div class="container">
<div class="sidebar1">
<div style="padding-top: 5px;">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" style="border-right: 0px;"><img src="resources/img/tab1.png" alt=""></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab2.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab3.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab4.png"></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
</div>
</div>
<div class="content" style="border-left: solid 1px #CCC;"><!-- end .content --></div>
<div class="content2" style="border-left: solid 1px #CCC;"><!-- end .sidebar2 --></div>
<!-- end .container -->
</div>
</section>
</div>
i have another attached css file (style.css)
#wrapper {
min-height:100%;
height:auto!important;
height:100%;
margin:0 auto -50px;
}
footer, #push {
height:50px;
}
html { height: 100%; }
body {
font:normal normal normal 11px/16px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
background:#8ec2da;
height: 100%;
}
.no-border {
border:none!important;
-moz-border-radius:0!important;
-webkit-border-radius:0!important;
-khtml-border-radius:0!important;
border-radius:0!important;
}
nav>ul {
padding:0;
}
a {
color:#06f;
outline:none;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
abbr, acronym {
font-size:85%;
letter-spacing:.1em;
text-transform:uppercase;
}
abbr[title], dfn[title] {
border-bottom:1px dotted black;
cursor:help;
}
abbr[title], acronym[title], dfn[title] {
border-bottom:1px dotted #CCC;
cursor:help;
}
code, kbd, samp, pre, tt, var, .code {
font-family:Monaco, 'Panic Sans', 'Lucida Console', 'Courier New', Courier, monospace, sans-serif;
}
h1 {
font-size:20px;
}
h2 {
font-size:18px;
}
h3 {
font-size:14px;
}
h4 {
font-size:13px;
}
h5 {
font-size:12px;
}
h6 {
font-size:11px;
}
h1, h2, h3, h4, h5, h6, p {
margin:1em 0;
}
h1, h2, h3 {
color:#000;
}
h4, h5, h6 {
color:#444;
font-weight:normal;
}
h6, p {
color:#676767;
}
h1, h2, h3, b, strong, caption, th, thead, dt, legend {
font-weight:bold;
}
ul, ol {
padding-left:2em;
}
li ul, li ol, ul ul, ol ol, dl dd {
margin-bottom:0;
margin-left:0;
margin-top:0;
}
small, sup, sub {
font-size:90%;
}
.code {
background-color:#EAEFF4;
color:#069;
overflow:auto;
padding:2px 6px;
}
.al {
text-align:left!important;
}
.ar {
text-align:right!important;
}
.ac {
text-align:center!important;
}
.fl {
float:left!important;
}
.fr {
float:right!important;
}
body.login {
height:0;
overflow:hidden;
}
.login-box {
margin:0 auto!important;
margin-top:-140px!important;
margin-left:-175px!important;
position:absolute!important;
top:50%;
left:50%;
width:350px;
}
.login-box form {
border-bottom:1px solid #DDD;
margin:10px 0;
}
.login-box ul {
list-style-type:none;
padding:0;
}
.login-box.main-content {
min-height:0;
}
#promo {
border-bottom:1px solid #000;
background:#f9d835;
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
-pie-background:linear-gradient(top, #f9d835, #f3961c);
padding:10px 0;
}
#promo p {
color:#fff;
margin:0;
line-height:26px;
text-shadow:0 1px 0 #000;
}
#promo .close {
color:#e83;
font-family:'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size:10px;
font-weight:bold;
padding:1px 5px;
text-shadow:0 1px 1px #fff;
text-decoration:none;
}
#wrapper>header {
background:#434343;
background:-moz-linear-gradient(top, #434343, #191919);
background:-webkit-gradient(linear, left top, left bottom, from(#434343), to(#191919));
-pie-background:linear-gradient(top, #434343, #191919);
-moz-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-khtml-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-pie-box-shadow:#bbb -2px 1px 2px;
box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
margin-bottom:20px;
position:fixed;
top:0;
width:100%;
z-index:999;
zoom:1;
}
#wrapper>header h1 {
color:#fff;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size:16px;
line-height:40px;
margin-top:0;
margin-bottom:0;
text-shadow:0 1px 1px #000;
}
#wrapper>header h1 a {
color:#fff;
text-decoration:none;
}
#wrapper>header nav {
background:transparent url(../../resources/img/line_vert.png) repeat-y top left;
}
#wrapper>header nav ul {
padding:0;
}
#wrapper>header nav>ul {
padding-left:10px;
}
#wrapper>header nav>ul>li {
display:block;
float:left;
position:relative;
}
#wrapper>header nav>ul>li a {
color:#eee;
display:block;
font-size:13px;
line-height:40px;
padding:0 10px;
text-decoration:none;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
}
#wrapper>header nav>ul li:hover>a {
color:#fff;
}
#wrapper>header nav>ul>li:hover:not(.action)>a {
background:#555;
background:-moz-linear-gradient(top, #555, #222);
background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
-pie-background:linear-gradient(top, #555, #222);
}
#wrapper>header nav>ul>li.active>a {
background:#191919!important;
color:#fff;
font-weight:bold;
}
#wrapper>header nav>ul>li.action {
border:1px solid #444;
border:1px solid rgba(255, 255, 255, 0.07);
border-bottom:1px solid rgba(255, 255, 255, 0.15);
margin-top:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
margin-right:4px;
}
#wrapper>header nav>ul>li.action>a.button {
color:#fff;
font-size:10px;
font-weight:bold;
line-height:16px;
padding:4px 10px;
border:1px solid #111;
}
#wrapper>header nav>ul>li>a span.arrow-down {
background:transparent url(../../resources/img/arrows.png) no-repeat 0 -103px;
display:inline-block;
height:6px;
margin-left:8px;
width:10px;
}
#wrapper>header nav>ul>li:hover>a span.arrow-down {
background:transparent url(../../resources/img/arrows.png) no-repeat -10px -103px;
}
#wrapper>header nav>ul ul {
background:#191919;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
display:none;
padding-bottom:5px;
position:absolute;
width:150px;
z-index:999;
-moz-box-shadow:0 2px 2px #777;
-webkit-box-shadow:0 2px 2px #777;
-khtml-box-shadow:0 2px 2px #777;
box-shadow:0 2px 2px #777;
}
#wrapper>header nav>ul li:hover ul {
display:block;
}
#wrapper>header nav>ul ul li a {
padding:0 10px;
line-height:30px;
}
#wrapper>header nav>ul ul li a:hover {
background:#434343;
}
#wrapper>header form input[type=text] {
background:#777;
border:1px solid #191919;
margin-top:7px;
-moz-box-shadow:0 1px 0 #ddd;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow:0 1px 0 #ddd;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-khtml-box-shadow:0 1px 0 #ddd;
-khtml-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
#wrapper>header form input[type=text]:hover {
background:#888;
}
#wrapper>header form input[type=text]:focus {
background:#eee;
}
#wrapper>section {
padding-top:60px;
}
.has-promo #wrapper>section {
padding-top:110px;
}
.main-section {
background:#afd4e6;
background:rgba(255, 255, 255, 0.3);
margin-bottom:20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
height: 100%;
}
.main-section .content {
padding:20px 20px 20px 0;
height: 100%;
}
.main-section .content h3:first-child {
margin-top:0;
}
.main-content {
background:#fff;
-moz-box-shadow:0 0 3px #555;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 3px #555;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-khtml-box-shadow:0 0 3px #555;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
min-height:100%;
position:relative;
z-index:1;
}
.main-content>header {
background:#eee;
background:-moz-linear-gradient(top, #fafafa, #e1e1e1);
background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e1e1e1));
-pie-background:linear-gradient(top, #fafafa, #e1e1e1);
border-bottom:1px solid #999;
-moz-border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-khtml-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:15px 30px;
-moz-box-shadow:0 1px 1px #bbb;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 1px #bbb;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-khtml-box-shadow:0 1px 1px #bbb;
-khtml-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-pie-box-shadow:none;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
}
.main-content>header h2 {
font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
font-weight:normal;
font-size:18px;
margin:0;
text-shadow:0 1px 0 #fff;
}
.main-content>header h4 {
margin:0;
}
.main-content>header .avatar {
background:#fff url(../../resources/img/user_32.png) no-repeat center center;
-moz-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px #777;
-khtml-box-shadow:0 0 3px #777;
box-shadow:0 0 3px #777;
display:block;
float:left;
height:60px;
margin-right:10px;
width:60px;
}
.main-content>header .tags {
background:transparent url(../../resources/img/icons/tag_blue.png) no-repeat 0 0;
float:left;
margin:0;
padding-left:20px;
}
.main-content>header .tags a {
font-size:9px;
}
.main-content>header .view-switcher {
font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
font-size:18px;
text-shadow:0 1px 0 #fff;
position:relative;
}
.main-content>header .view-switcher>h2>a {
background:transparent url(../../resources/img/arrow-updown.png) no-repeat center center;
display:inline-block;
text-indent:-999em;
width:10px;
height:17px;
}
.main-content>header .view-switcher ul {
background:#dedeff;
border:1px solid #999;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 3px #888;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 0 3px #888;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0 0 3px #888;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
box-shadow:0 0 3px #888;
box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
display:none;
list-style-type:none;
padding:10px 20px;
position:absolute;
z-index:999;
margin:-10px -20px;
top:-12px;
left:-1px;
min-width:160px;
}
.main-content>header .view-switcher ul li {
font-size:12px;
}
.main-content>header .view-switcher ul li.separator {
border-bottom:1px solid #999;
margin:10px 0;
}
.main-content>header .view-switcher ul li a {
color:#222;
display:block;
font-size:18px;
line-height:40px;
margin:0 -20px;
padding:0 20px;
text-decoration:none;
}
.main-content>header .view-switcher ul li a:hover {
background:#afd4e6;
}
.main-content>header .action-buttons {
position:relative;
top:-4px;
z-index:999;
}
.main-content>section {
padding:20px 30px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
.main-content>section.container_6 {
padding:20px;
}
.main-content>section hgroup {
margin-top:10px;
}
.main-content>section hgroup h2 {
padding-top:10px;
margin:0 0 3px 0;
line-height:1.3em;
text-transform:uppercase;
}
.main-content>section hgroup h4 {
line-height:1.4em;
margin:0 0 30px;
}
.main-content>section .other-options h3 {
color:#555;
border-bottom:1px dotted #999;
padding-bottom:5px;
}
.main-content>section .other-options ul {
list-style-type:none;
padding:0;
}
.main-content>section .other-options h4 {
margin-bottom:0;
}
.main-content>section .other-options h4+p {
margin-top:0;
}
.list-view {
border-top:1px solid #ddd;
font-size:12px;
margin-left:-30px;
margin-right:-30px;
}
.list-view>li {
border-bottom:1px solid #ddd;
padding:10px 30px 10px 55px;
position:relative;
zoom:1;
}
.list-view>li.contact {
background:transparent url(../../resources/img/icons/vcard.png) no-repeat 30px 10px;
}
.list-view>li.company {
background:transparent url(../../resources/img/icons/building.png) no-repeat 30px 10px;
}
.list-view>li.note {
background:transparent url(../../resources/img/icons/note.png) no-repeat 30px 10px;
}
.list-view>li.tick {
background:transparent url(../../resources/img/icons/tick.png) no-repeat 30px 10px;
}
.list-view>li.calendar {
background:transparent url(../../resources/img/icons/calendar.png) no-repeat 30px 10px;
}
.list-view>li:hover {
background-color:#fafafa;
}
.list-view>li.current {
background-color:#f1f1f1;
}
.list-view>li .more {
background:#bcf url(../../resources/img/arrow-right.png) no-repeat center center;
display:block;
width:16px;
height:100%;
position:absolute;
right:0;
top:0;
text-align:center;
text-decoration:none;
text-indent:-999em;
visibility:hidden;
}
.list-view>li .more:hover {
cursor:pointer;
}
.list-view>li:hover .more {
visibility:visible;
}
.list-view>li.current .more {
background-image:url(../../resources/img/arrow-left.png);
visibility:visible;
}
.list-view>li .timestamp {
color:#555;
float:right;
font-size:9px;
}
.list-view>li a {
font-weight:bold;
}
.list-view>li p {
color:#111;
margin:0;
}
.list-view>li .entry-meta {
color:#555;
}
.list-view>li .avatar {
border:1px solid #ddd;
float:left;
height:32px;
margin-right:4px;
width:32px;
}
.list-view>li .avatar img {
width:32px;
height:32px;
}
.grid-view li {
background:#fff;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
-moz-box-shadow:0 0 3px #777;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
-khtml-box-shadow:0 0 3px #777;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
box-shadow:0 0 3px #777;
box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
float:left;
margin:5px;
padding:5px;
position:relative;
width:180px;
}
.grid-view>li .more {
background:#bcf url(../../resources/img/arrow-right.png) no-repeat center center;
-moz-border-radius:0 3px 3px 0;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-khtml-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
display:block;
width:16px;
height:100%;
position:absolute;
right:0;
top:0;
text-align:center;
text-decoration:none;
text-indent:-999em;
visibility:hidden;
}
.grid-view>li .more:hover {
cursor:pointer;
}
.grid-view>li:hover .more {
visibility:visible;
}
.grid-view>li.current .more {
background-image:url(../../resources/img/arrow-left.png);
visibility:visible;
}
.grid-view li .timestamp {
position:absolute;
bottom:0;
right:15px;
display:block;
font-size:9px;
}
.grid-view li .name {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.grid-view li .entry-meta {
font-size:9px;
}
.grid-view li .avatar {
border:1px solid #ddd;
float:left;
height:60px;
margin-right:4px;
width:60px;
}
.grid-view>li .avatar img {
width:60px;
height:60px;
}
.listing {
list-style-type:none;
padding:0;
}
.listing>li.contact .avatar {
background:transparent url(../../resources/img/user_32.png) no-repeat center center;
}
.listing>li.company .avatar {
background:transparent url(../../resources/img/users_business_32.png) no-repeat center center;
}
.preview-pane {
position:relative;
z-index:0;
}
.preview-pane .preview {
background:#fcfcfc;
display:block;
top:0;
left:-370px;
padding:20px;
position:absolute;
height:350px;
width:310px;
-moz-border-radius:0 5px 5px 0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
-moz-box-shadow:0 2px 2px #777;
-webkit-box-shadow:0 2px 2px #777;
-khtml-box-shadow:0 2px 2px #777;
box-shadow:0 2px 2px #777;
}
.preview-pane .preview>h3:first-child, .preview-pane .preview>h4:first-child {
margin-top:0;
}
#wrapper>section>div>aside nav {
padding:10px 0;
margin-right:-20px;
}
#wrapper>section>div>aside nav>ul {
display:block;
}
#wrapper>section>div>aside nav>h4 {
color:#333;
font-size:10px;
font-weight:bold;
margin-top:0;
padding-left:8px;
text-transform:uppercase;
text-shadow:0 1px 0 #eee;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
#wrapper>section>div>aside nav>ul>li {
float:left;
width:100%;
}
#wrapper>section>div>aside nav>ul>li a {
color:#333;
display:block;
font-size:11px;
padding:5px 4px 5px 8px;
text-decoration:none;
text-shadow:0 1px 1px #fff;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-moz-border-radius:4px 0 0 4px;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-khtml-border-radius:4px 0 0 4px;
border-radius:4px 0 0 4px;
line-height:16px;
}
#wrapper>section>div>aside nav>ul>li>a:hover {
background:#9ecbe0;
background:rgba(255, 255, 255, 0.15);
}
#wrapper>section>div>aside nav>ul>li.active>a {
background:#afd4e6;
background:rgba(255, 255, 255, 0.3);
color:#111;
font-weight:bold;
}
#wrapper>section>div>aside nav>ul>li a h5, #wrapper>section>div>aside nav>ul>li a h6 {
line-height:140%;
margin:0;
}
#wrapper>section>div>aside nav>ul>li a h5 {
margin-bottom:3px;
}
#wrapper>section>div>aside nav>ul>li a h6 {
font-size:9px;
text-shadow:none;
}
#wrapper>section>div>aside nav.global>ul>li>a span {
background:#def;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
float:right;
font-size:9px;
font-weight:normal;
padding:0 4px;
margin-right:2px;
}
#wrapper>section>div>aside nav.subnav {
background:transparent url(../../resources/img/line.png) repeat-x top left;
}
#wrapper>section>div>aside nav>ul>li a.nav-icon {
background-position:5px 50%;
background-repeat:no-repeat;
padding-left:25px;
}
.icon-book {
background-image:url(../../resources/img/icons/book.png)!important;
}
.icon-house {
background-image:url(../../resources/img/icons/house.png)!important;
}
.icon-note {
background-image:url(../../resources/img/icons/note.png)!important;
}
.icon-tick {
background-image:url(../../resources/img/icons/tick.png)!important;
}
.icon-time {
background-image:url(../../resources/img/icons/time.png)!important;
}
.apple_overlay {
display:none;
background-image:url(resources/img/white.png);
width:640px;
padding:35px;
font-size:11px;
}
.apple_overlay .close {
background-image:url(../../resources/img/close-icon.png);
position:absolute;
right:14px;
top:14px;
cursor:pointer;
height:30px;
width:30px;
}
.apple_overlay.black {
background-image:url(../../resources/img/transparent.png);
color:#fff;
}
third css file (reset.css)
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;
}
body {
line-height:1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
/*content:none;*/
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

Try adding overflow: auto; to your elements :)

div#wrapper is the first div mentioned in your HTML - and it has no styles applied at all.

100% height will only work if the parent has an absolute height defined. You need to define the height for the parent first and then the child will get 100% of its height.

Related

Line below headings alignment issue

I have created a heading style with a line below heading.The issue is the line does not align itself with the alignment of text to center or right. It's always on the left side no matter where the text is aligned.
h1 {
margin: 0 0 25px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
color:black;
line-height:2em;
}
h1:after {
content:' ';
position: relative;
display:block;
width: 40px;
margin: 0 0;
border:1px solid #CB9033;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

You can use a class for center and right alignment:
h1 {
color:#000;
font-family:'Raleway', sans-serif;
font-weight:300;
line-height:2em;
margin:0 0 25px;
position:relative;
}
h1:after {
border:1px solid #CB9033;
content:'';
display:block;
margin:0;
position:absolute;
width:40px;
}
h1.right {
text-align:right;
}
h1.right:after {
right:0;
}
h1.center {
text-align:center;
}
h1.center:after {
left:50%;
transform:translateX(-50%);
}
<h1 class="right">Test</h1>
<h1 class="center">Test</h1>
<h1>Test</h1>

My website is not fitting to each screen resolution of pc

Hello i have created a website in 3 months using HTML, CSS, Jquery and PHP.
for design and layout i have used CSS, after building this website i have noticed that
Whenever i m opening my website in small screens so there is need of width scroll to see
whole page especially the language dropdown selection in right corner of page.
in my CSS i have used PX for divs such as wrapper, header and etc
Someone told me to use Percentage instead of PX, but i have reached to end.
First guys what i should do to solve this problem?
Second is there any way to convert from PX to Percentage.
.wrapper
{
width:1320px;
height:760px;
border:solid 1px #000;
margin:0 auto;
background:url(images/Background_Image.jpg) no-repeat;
}
.wrapper .logo
{
background:url(images/logo.png) no-repeat bottom;
width:360px;
height:180px;
margin-left:345px;
margin-top:10px;
float:left;
}
.wrapper .language
{
float:right;
background-color:#006;
padding:5px 10px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border:#00AEEF;
color: #FFFFFF;
font:bold 1.2em "Calibri";
margin:0px 0px 0px 0px;
cursor:pointer;
text-align:center;
}
.wrapper .language a
{
color:#FFF;
text-decoration:none;
font:"calibiri";
}
.wrapper .search_property
{
width:300px;
height:500px;
margin-right:58px;
margin-top:80px;
float:right;
}
.wrapper .search_property .title
{
background:url(images/protitle.fw.png) no-repeat;
width:295px;
height:80px;
margin-bottom:10px;
float:left;
text-align:center;
color:#FFF;
font: bold 1.7em "Calibri";
}
.wrapper .search_property .province
{
background:url(images/proprovince.fw.png) no-repeat;
width:295px;
height:70px;
float:left;
margin-bottom:10px;
text-align:center;
}
/* start design for the province */
select
{
width:195px;
margin-top:23px;
padding:3px 3px 3px 46px;
font: bold 1em "Calibri";
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1.3px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f6f6f8;
color:#000;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
option
{
text-align:center;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
.la
{
position:relative;
}
.la:after {
content:'<>';
font:11px "Consolas", monospace;
color:#000;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
.la:before {
content:'';
right:3.5px;
top:-1px;
width:25px; height:22px;
background:#ccc;
position:absolute;
pointer-events:none;
display:block;
}
/* end design for the province */
.wrapper .search_property .district
{
background:url(images/prodistrict.fw.png) no-repeat;
width:295px;
height:70px;
float:left;
margin-bottom:10px;
text-align:center;
}
.wrapper .search_property .propertystatus
{
background:url(images/prostatus.fw.png) no-repeat;
width:295px;
height:90px;
float:left;
margin-bottom:10px;
color:#FFF;
padding:20px 0 0 0;
}
radio
{
cursor:pointer;
}
.wrapper .search_property .probutton
{
width:270px;
height:50px;
float:left;
margin-bottom:3px;
padding:0 0 0 25px;
}
.wrapper .search_property .postprobutton
{
width:285px;
height:40px;
float:left;
margin-top:5px;
padding:0 0 0 10px;
}
#Submitbutton
{
background: #006 url(images/a.fw.png) no-repeat right;
padding:5px 15px;
border-radius:4px;
width:233px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border:#00AEEF;
color: #FFFFFF;
font:bold 1.5em "Calibri";
margin:0px 0px 0px 0px;
cursor:pointer;
text-align:left;
}
#pypbutton
{
background: #006 url(images/Property%20List.png) no-repeat right;
padding:5px 15px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border:#00AEEF;
color: #FFFFFF;
font:bold 1.4em "Calibri";
margin:0px 0px 0px 0px;
cursor:pointer;
text-decoration:none;
}
.wrapper .slideshow
{
width:395px;
height:264px;
margin-left:325px;
margin-top:24px;
float:left;
}
.wrapper .menu
{
width:412px;
height:20px;
margin-left:327px;
margin-top:40px;
float:left;
}
.wrapper .menu .aboutus
{
width:68px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .myaccount
{
width:85px;
height:18px;
color:#fff;
margin:0px 5px 0px 0px;
font: 1em Arial, Helvetica, sans-serif;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .services
{
width:65px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .career
{
width:54px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
border-right:#039 solid 3px;
}
.wrapper .menu .contactus
{
width:87px;
height:18px;
color:#fff;
font: 1em Arial, Helvetica, sans-serif;
margin:0px 5px 0px 0px;
cursor:pointer;
float:left;
}
.wrapper .footer
{
background:url(images/footerbg.jpg) bottom;
width:1120px;
height:155px;
margin-top:15px;
float:left;
margin-left:100px;
}
.wrapper .footer .footer_in
{
width: 900px;
height: auto;
margin: auto;
padding: 14px 0px 0px 0px;
}
.wrapper .footer .footer_in .footer_navigation
{
/*width:412px;*/
height:128px;
float:left;
font-size:11px;
background:url(images/border.jpg) right no-repeat;
font: 1em "Calibri";
width:350px;
}
.wrapper .footer .footer_in .footer_navigation .fn_heading
{
width:310px;
font: 1em "Calibri";
color:#fff;
height:37px;
font-size:12px;
background:url(images/footerimg.png) no-repeat;
padding-left:10px;
line-height:24px;
}
.wrapper .footer ..footer_in .footer_navigation ul {
float:left;
width:320px;
padding-left:9px;
}
.wrapper .footer .footer_in .footer_navigation li {
float:left;
width:127px;
background:url(images/listimg.gif) no-repeat left;
padding-left:12px;
display:block;
padding-bottom:4px;
}
.wrapper .footer .footer_in .footer_navigation li a
{
color:#fff;
text-decoration:none;
}
.wrapper .footer .footer_in .footer_navigation li a:hover {
text-decoration:underline;
}
.wrapper .footer .footer_in .copyright
{
background: url(images/border.gif) no-repeat scroll right center transparent;
color: #FFFFFF;
float: left;
font: 1em "Calibri";
min-height: 94px;
padding-left: 14px;
padding-right: 30px;
padding-top: 35px;
}
.wrapper .footer .footer_in .copyright a
{
padding-bottom:5px;
color:#fff;
text-decoration:none;
}
.wrapper .footer .footer_in .copyright a:hover
{
text-decoration:underline;
}
.wrapper .footer .footer_in .footer-add
{
text-align:center;
width:220px;
float:right;
margin-left:10px;
font: 1em "Calibri";
}
.wrapper .footer .footer_in .footer-add a
{
color:#fff;
background:url(images/link_for_scale-new_03.png) no-repeat bottom;
height:122px;
display:block;
}

Check your monitor resolution (By the CSS, my guess is that it is 1440x768).
Now do this math with every pixel value: ("Pixel Width Value"/1440)*100 and ("Pixel Height Value"/768)*100.
That is your value in %!
Some elements might not work properly, but it's a good way to start.
There are also other units that can work depending on the screen size
check one of them here.
However I think % might be the best for you to start out.

lists not showing bullets in html5 css

I am using Dreamweaver to edit an HTML5 CSS site, but the bullets refuse to show up on lists. I don’t know whether the issue is Safari or the code for the site.
I have tried many suggestions and been unable to find a solution.
INDEX.HTML
<li id="page_donations">
<div class="contPad">
<div>
<h2>What we Do</h2>
<div class="scrollingDiv">
<ul class="list">
<li>
<div>
<h5>DESIGN</h5>
<p>Concept development, graphic design, web design, and logo design.</p>
</div>
</li>
<li>
<div>
<h5>MARKETING</h5>
<ul class="list">
<li>Identify, segment, or focus on your target market
<ul>
<li>Marketbridge can help you assess and narrow down your target market through a variety of traditional and non-traditional strategies including:
<ul>
<li>Market segmentation, database mining and development, leveraging market intelligence, conducting studies and consumer surveys among some of the strategies applied</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<div>
<h5>BRANDING</h5>
<p>Marketbridge's success will help drive our vision of cultivating a more cohesive professional and social network within businesses and communities which helps to fuel commerce and goodwill within our communities.</p>
</div>
</li>
<li>
<div>
<h5>PUBLIC RELATIONS</h5>
<p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
</div>
</li>
<li>
<div>
<h5>ADDITIONAL SERVICES</h5>
<p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
STYLE.CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300);
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
/* Left & Right alignment */
.left {
float:left;
}
.right {
float:right;
}
.wrapper {
width:100%;
overflow:hidden;
position:relative;
}
.box {
overflow:hidden;
}
.clear {
clear:both;
width: 100%;
}
.last {
background:none !important;
border:none !important;
}
.pad_0 {
padding:0 !important;
}
/* Global properties ======================================================== */
body, html, .extra, #left_bg{
height:100%;
min-width:1220px;
min-height:550px;
}
body {
overflow:hidden;
border:0;
font:14px/20px Arial, sans-serif;
color:#FFF;
background:url(../images/27.jpg) 0 0 repeat;
}
#left_bg{
position:absolute;
width:81px;
background:url(../images/27_left.jpg) 0 0 repeat-y;
z-index:-1;
}
/* Global Structure ============================================================= */
.extra {
overflow:hidden;
margin-bottom:-80px;
}
.main {
position:relative;
}
.page_spinner {
position:fixed;
background: url(../images/main_spinner.gif) 50% 50% no-repeat #fff;
z-index:99;
width:100%;
height:100%;
top:0;
left:0
}
/* ============================= main layout ====================== */
a {
color:#909090;
text-decoration: none;
outline:none;
}
a:hover {
color:#757575
}
h1 {
position:absolute;
padding:0 0 0 0;
}
h2 {
font:35px/35px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
padding-bottom:15px;
text-shadow: 1px 1px 6px #665d58;
}
h3{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#fff;
font-weight:700;
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
h4{
font:14px/20px Arial, sans-serif;
font-weight:normal;
text-shadow: 1px 1px 6px #665d58;
}
h5{
font:16px/16px 'Open Sans Condensed', sans-serif;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#fff;
text-decoration: none;
outline:none;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a:hover{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#757575
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
p{
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
.color1{
color:#74398e !important;
}
.color2{
color:#bd3274;
}
.color3{
color:#15b3f9;
}
V.color4{
color:#afbf44;
}
.color5{
color:#f8cc07;
}
.color6{
color:#ee8d1b;
}
.color7{
color:#e0191c;
}
.color8{
color:#000;
}
.color8 a {
color:#909090;
text-decoration: none;
outline:none;
}
color8 a:hover {
color:#757575
}
div.scrollingDiv
{
overflow-y:scroll;
height: 350px;
}
/* ============================= header ====================== */
header{
position:relative;
overflow:hidden;
width:1220px;
height:502px;
padding-top:145px;
}
#logo {
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width:235px;
height:153px;
background:url(../images/logo.png) 0 0 no-repeat;
}
/* ============================= menu ====================== */
#leftLines{
float:left;
width:81px;
height:502px;
background:url(../images/left_menu_line.png) 0 0 no-repeat;
}
.menu {
float:left;
width:1139px;
height:502px;
}
#menu{
padding-top:121px;
}
#menu > li {
height:27px;
display:block;
margin-bottom:11px;
}
#menu > li > span{
display:inline-block;
width:50px;
height:27px;
}
#menu > li a {
position:relative;
top:-1px;
left:-3px;
font:34px/28px 'Impact', sans-serif;
text-transform:uppercase;
font-weight:normal;
}
#item1 > span{
background:url(../images/menu_line1.png) 0 0 repeat-x;
}
#item2 > span{
background:url(../images/menu_line2.png) 0 0 repeat-x;
}
#item3 > span{
background:url(../images/menu_line3.png) 0 0 repeat-x;
}
#item4 > span{
background:url(../images/menu_line4.png) 0 0 repeat-x;
}
#item5 > span{
background:url(../images/menu_line5.png) 0 0 repeat-x;
}
#item6 > span{
background:url(../images/menu_line6.png) 0 0 repeat-x;
}
#item7 > span{
background:url(../images/menu_line7.png) 0 0 repeat-x;
}
/* ============================= pages ====================== */
#page_home, #page_privacy, #page_more{
background:url(../images/page1_top_line.png) 0 0 repeat-x;
}
#page_mission{
background:url(../images/page2_top_line.png) 0 0 repeat-x;
}
#page_donations{
background:url(../images/page3_top_line.png) 0 0 repeat-x;
}
#page_news{
background:url(../images/page4_top_line.png) 0 0 repeat-x;
}
#page_reports{
background:url(../images/page5_top_line.png) 0 0 repeat-x;
}
#page_links{
background:url(../images/page6_top_line.png) 0 0 repeat-x;
}
#page_contacts{
background:url(../images/page7_top_line.png) 0 0 repeat-x;
}
/* ============================= content ====================== */
#content {
position:absolute;
top:160px;
padding:5px 0px 12px 0px;
width:711px;
height:453px;
background:url(../images/page_plane.png) 0 0 no-repeat;
z-index:5;
}
#content > ul {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
#content > ul > li {
position:absolute;
width:100%;
height:584px;
padding-top:24px;
left: -26px;
top: -18px;
}
.contPad{
padding:0px 30px 0 40px;
}
.padBot1{
padding-bottom:40px;
}
.padBot2{
padding-bottom:25px;
}
.padTop1{
padding-top:20px;
}
.rBorder{
background:url(../images/content_step_line.png) right 0 repeat-y;
}
.more1, .more2{
position:relative;
margin-top:12px;
display:inline-block;
color:#fff;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-webkit-transition:color 0.5s ease;
-moz-transition:color 0.5s ease;
-o-transition:color 0.5s ease;
transition:color 0.5s ease;
padding:7px 14px 10px;
font:18px/ 18px 'PT Sans Narrow', sans-serif;
font-weight:700;
text-shadow: 1px 1px 0px #665d58;
border-top:1px solid #646464;
border-right:1px solid #646464;
background:url(../images/more_1.png) 0 0 repeat-x;
}
.more1:hover{
color:#febe3b;
}
.more2{
margin-top:0px;
padding:5px 14px 8px;
font:22px/ 22px 'PT Sans Narrow', sans-serif;
font-weight:300;
letter-spacing:1px;
text-shadow: 1px 1px 0px #14b1f6;
border-top:1px solid #14b1f6;
border-right:1px solid #14b1f6;
background:url(../images/more_2.png) 0 0 repeat-x;
}
.more2:hover{
color:#3b3019;
}
.imgBot{
padding-bottom:16px;
}
#table1{
margin-bottom:35px;
height:253px;
border-bottom:1px solid #a6a6a6;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#tableHeader{
background-color:#15b3fa;
}
#tableHeader, #table1 .col1{
font-size:14px;
color:#151515;
font-weight:bold;
text-transform:uppercase;
}
#table1 #tableHeader td{
height:41px;
}
#table1 .anotherColor{
background-color:#efeff0;
}
#table1 td{
height:30px;
}
#table1 tr{
vertical-align:middle;
}
#table1 .col1{
border-left:1px solid #e9e9e9;
border-right:1px solid #c9c9ca;
width:43px;
text-align:center;
}
#table1 .col2{
width:440px;
text-indent:20px;
}
#table1 .col3{
border-left:1px solid #c9c9ca;
border-right:1px solid #e9e9e9;
width:149px;
text-align:center;
}
#page1_top{
padding:25px 0px 0px 45px;
width:560px;
height:200px;
background:url(../images/page1_pic1.) 0 0 no-repeat;
}
#page1_top > div{
padding-bottom:13px;
font:34px/ 34px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:300;
text-shadow: 1px 1px 6px #665d58;
}
#page1_top > div > span{
display:block;
font:50px/ 50px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
}
.google_map{
float:left;
width: 360px;
height: 180px;
background: #fff;
}
.address {
width:230px;
padding-left:20px;
float:left;
}
.address > span{
display:block;
width:160px;
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.mailLink{
color:#e0191c;
text-decoration:none;
}
.mailLink:hover{
text-decoration:underline;
}
/* ============================= lists ====================== */
.list1 li{
overflow:hidden;
width:270px;
padding-bottom:20px;
}
.list1 li > img{
float:left;
padding-right:10px;
}
.list1 li > ul{
overflow:hidden;
padding-top:7px;
width:178px;
}
.list2 li{
overflow:hidden;
padding-bottom:8px;
}
.list2 li > img{
float:left;
padding-right:18px;
}
.list2 li > div{
float:left;
overflow:hidden;
width:224px;
}
.list2 li > div a:hover{
text-decoration:underline;
}
.list3 li{
padding-bottom:17px;
}
.list3 li > img{
padding-bottom:16px;
}
.list3 li a{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.list3 li a:hover{
text-decoration:underline;
}
.list4{
margin-bottom:-10px;
}
.list4 li{
overflow:hidden;
padding-bottom:10px;
}
.list4 li > img{
float:left;
padding-right:20px;
}
.list4 li > div{
float:left;
overflow:hidden;
width:354px;
}
.list5 li{
padding-bottom:11px;
}
.list5 p{
line-height:18px;
padding-bottom:8px;
}
.list5 a{
font-size:13px;
font-weight:bold;
color:#ff6400;
}
.list5 a:hover{
text-decoration:underline;
}
.listWithMarker1 li, .listWithMarker2 li {
display:block;
padding-bottom:4px;
}
.listWithMarker1 li a, .listWithMarker2 li a {
display:inline-block;
padding:0 5px 0 17px;
text-decoration:underline;
}
.listWithMarker1 li a, .listWithMarker2 li a {
-webkit-transition:color 0.3s ease;
-moz-transition:color 0.3s ease;
-o-transition:color 0.3s ease;
transition:color 0.3s ease;
}
.listWithMarker1 li a {
color:#ff2a29;
background:url(../images/list_marker_1.png) 0 5px no-repeat;
}
.listWithMarker2 li a {
color:#feb829;
background:url(../images/list_marker_2.png) 0 5px no-repeat;
}
.listWithMarker1 li a:hover, .listWithMarker2 li a:hover {
color:#757575;
}
/* ============================= footer ====================== */
footer{
position:relative;
width:1100px;
font:15px/ 15px 'Open Sans Condensed', sans-serif;
color:#757575;
font-weight:700;
text-align:center;
text-transform:uppercase;
}
footer a{
text-decoration:none;
color:#c2c2c2;
}
footer ul{
padding-top:9px;
}
footer ul li{
display:inline-block;
padding-right:1px;
}
#icon1, #icon2{
display:block;
width:31px;
height:31px;
}
#icon1{
background:url(../images/icon1.png) 0 0 no-repeat;
}
#icon2{
background:url(../images/icon2.png) 0 0 no-repeat;
}
/* ============================= forms ============================= */
#form1 input {
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:15px 0 15px 17px;
width:252px;
box-shadow:none;
}
#form1 textarea {
resize: none;
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:14px 0 5px 17px;
width:330px;
height:92px;
overflow:auto;
line-height:18px;
}
#form1 label {
position:relative;
display:inline-block;
min-height:60px;
}
#form1 .error, #form1 .empty {
position:relative;
top: -3px;
display:none;
font-size:10px;
color:#414040;
text-transform:none;
}
.btns{
float:right;
}
.btns a{
margin:18px 0 0 13px;
}
/* Form defaults */
input, select, textarea {
font:14px/20px Arial, sans-serif;
color:#909090;
}
.blacktext {
color: #000;
}
.fb {
vertical-align: middle;
padding:40px 40 40px 40px;
}
RESET.CSS
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var {
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style-position:inside;
list-style: circle;
}
blockquote, q {
quotes: none;
}
table, table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}
* { border:none}
input, textarea{ outline:none !important}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure,
footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{
display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
LAYOUT.CSS
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
float: left;
}
.rightIndent{
padding-right:10px;
}
.rightIndent1{
padding-right:40px;
}
.rightIndent2{
padding-right:50px;
}
.leftIndent1{
padding-left:40px;
}
.leftIndent2{
padding-left:40px;
}
.height1{
}
.grid_1 {
width:30px;
}
.grid_2 {
width:70px;
}
.grid_3 {
width:110px;
}
.grid_4 {
width:150px;
}
.grid_5 {
width:190px;
}
.grid_6 {
width:230px;
}
.grid_7 {
width:270px;
}
.grid_8 {
width:310px;
}
.grid_9 {
width:350px;
}
.grid_10 {
width:390px;
}
.grid_11 {
width:430px;
}
.grid_12 {
width:470px;
}
.grid_13 {
width:510px;
}
.grid_14 {
width:550px;
}
.grid_15 {
width:590px;
}
.grid_16 {
width:630px;
}
.grid_17 {
width:670px;
}
.grid_18 {
width:710px;
}
.grid_19 {
width:750px;
}
.grid_20 {
width:790px;
}
.grid_21 {
width:830px;
}
.grid_22 {
width:870px;
}
.grid_23 {
width:910px;
}
.grid_24 {
width:950px;
}

Having scotch-taped your code snippets together, I see two reasons for your disappearing bullets: first of all, make sure that the lists have a sufficient margin on the left to actually display the bullets (20px should be enough) and, if the little buggers are still hiding (such as is the case in your example, white text on a white background?), give the list some color. Something like this:
ul.list{
margin-left: 20px;
color: deeppink;
}
You're still going to face the problem that the bullets don't have a text-shadow, for which I cannot give you a quick and dirty answer. Personally, I'd hide the bullets, give my list-items some padding and stick a properly styled background-image in there.

I know this is an old question, but since I had the same issue and resolved it after seeing this, I figured I'd answer the question for someone else.
If you use CSS3 property
display:block;
for list items, the list-style / list-style-type properties will be ineffective. See http://www.w3schools.com/tags/tag_li.asp
Remove display:block; or reset to display: list-item;

div overlapping/misplaced

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.

CSS Validation Error : Same colors for color and background-color in two contexts

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.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

setting div to 100% still not working - css

Try adding overflow: auto; to your elements :)

div#wrapper is the first div mentioned in your HTML - and it has no styles applied at all.

100% height will only work if the parent has an absolute height defined. You need to define the height for the parent first and then the child will get 100% of its height.

Related

Line below headings alignment issue

My website is not fitting to each screen resolution of pc

lists not showing bullets in html5 css

div overlapping/misplaced

CSS Validation Error : Same colors for color and background-color in two contexts

Categories

Resources