4 replies [Last post]
magicman
magicman's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT-7
Joined: 2012-06-27
Posts: 7
Points: 12

site in question is http://www3.telus.net/lortech/example7/cctv.html

As you can see, the site body is black so not sure what is causing it. The proper spacing of the unordered list and paragraph are running into each other.
Did not see what is causing it.

I have had css validator look at my style.css code and it comes with no errors.

Same validator looked at cctv.css some with some border color issue, but all background colors are set to FFFFFFF. cctv.css was taken from another site and so only some of the css code is used for cctv.html.

style.css

/*This is like container with all all the elements in it*/
*{
margin:0;
padding:0;
}
#container {
	margin: 0 auto;
	width:900px;
	height:auto;
	background-color:#000000;
	font-family:avenir, sans-serif;
	}	
 
 
/*phone contact upper right index.html */	
.contact {
  top:0px;
  float: right;
  Background-color:#005555;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  }
 
.contact-title {
  vertical-align:top;
  display:inline-block;
  text-align:right;
  margin:0 12px 12px 0;
  color:#FFFFFF;
}
 
.contact-info {
  display:inline-block;
}
 
.contact span {
  display:block;
  line-height:1.5em;
  color:#FFFFFF;
}
 
 
 
.header {
    position:relative;
	width:900px;
	height:125px;
    background-color:#FFF;
	}	
 
	/*-Company logo name on left side of header-*/	
#logo {  
	float:left;
	margin:10px;
	width:315px;
	height:50%;
	background-image:url('logo.png');
	text-align:center;
}
h1 {
margin-right:20px;
font-size:22px;
margin-top:opx;
font-family:Avenir, Helvetica;
color:blue;
}
 
 
	p ,h2 ,tr,pblue{
	width:700px;
	margin-left:20px;
	margin-right:20px;
	margin-top:5px;
	padding-bottom:10px;
	font-family:Avenir;
	padding:5px;
	}
 
.right20 {
margin-top:10px;
margin-left:40px;
padding-bottom:30px;
}	
 
p span 
{
  display: block;
}
 
.pright{
float:right;
font-family:avenir;
margin-top:10px;
border:0px;
font-size:12px;
}	
.pleft { /* came as pright */
float:right;
font-family:Avenir;     
Margin-left:10px;
Margin-top: 0 auto;
Margin-bottom: 0 auto;
border:5px;
font-size:2em;
}		
 
.pblue {
color:blue;
font-size:150%;
line-height:12px;
text-align:left;
margin: 20px 40px 5px 20px;
}
 
.pbluesmall {
color:blue;
font-family:avenir;
font-size:110%;
line-height:12px;
padding-top:20px;
margin-left:20px;
}
 
 
 
.pred {
color:red;
font-size:25%;
line-height:2px;
}
 
 
 
 
 
/* center image in body. Use <IMG class="displayed" src="..." alt="..."> */
img.displayed {
    display: block;
    float:right; }
 
/*magin for unordered 
ul.m20
 
 
 
/* ----------------CSSTerm.com Simple Horizontal DropDown CSS menu--------------- */
 
 
 
 
.drop {
position:relative;
z-index:1;
 
}
.drop_menu {
	background:#005555;
	padding:0px;
	margin:0;
	list-style-type:none;
	height:40px;
}
.drop_menu li { float:left; }
.drop_menu li a {
	padding:10px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px ,Avenir, bold;
}
 
/* Submenu */
.drop_menu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#48579D; }
.drop_menu li:hover ul {
	left:0px;
	top:30px;
	background:#48579D;
	padding:0px;
    border: 1px solid #000;
    margin-top: -1px;
	}
 
.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#48579D;
    border: 1px solid #000;
    margin-top: -1px;
	}
 
	/* body section of page */
    #content {
      background-color: #FFFFFF;
      float: none;
      height: auto;
      margin-top: 50px;
      padding: 10px 20px 20px;
      position: relative;
      width: 875px;
      margin: 0 auto;
      overflow:hidden;   
	  font-family:	Avenir, Helvetica;
   }
 
/*------Paragraph titles in blue --*/	
 
 
 
 
/*form info for contact.html */
 .block label {
 display:inline-block;
 width:400px;
 text-align:right;
 
  }
 
label {
    margin-bottom: 5px;
} 
 
 
 
/* float images right */
.ImageRight {
float:right;
margin:5px;
padding:5px;
}
 
 
 
.right_aligned {
	height: 10em;
	line-height: 1.25em;
	padding-top:30px;
}
 
.right_aligned label {
	display: block;
	float: left;
	clear: left;
	width: 200px;
	padding-right: 1em;
	text-align: right;
}
 
.right_aligned select, .right_aligned input {
	display: block;
}
 
 
#footer {
    position:relative;
    left:0px;
	bottom:0px;
	height:120px;
	width:900px;
    background-image:url('footer.png');
    background-repeat:no-repeat;
	clear:both;
}

cctv.css

table {
    border-collapse: collapse;
}
input, select {
    font-family: tahoma;
    font-size: 12px;
    vertical-align: middle;
}
td, p, li, select{
    line-height: 150%;
}
 
 
a img {
    border: medium none;
}
 
img {
    border-color: #CCCCCC;
}
 
p {
    padding: 0 0 14px;
}
 
a {
    color: #555555;
    cursor: pointer;
}
 
 
.black {
    color: #000000;
}
 
.white {
    color: #FFFFFF;
}
 
.grey {
    color: #CCCCCC;
}
 
.red {
    color: #FF3300;
}
 
.red2 {
    color: #990000;
}
 
.blue {
    color: #0033FF;
}
 
.green {
    color: #008000;
}
 
.mcolor {
    color: #990000;
}
 
.b {
    font-weight: bold;
}
 
.clear {
    clear: both;
}
 
.nob {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
}
 
.fl {
    float: left;
}
 
.fr {
    float: right;
}
 
.float_left {
    float: left;
    padding: 7px;
}
 
.float_right {
    float: right;
    padding: 7px;
}
 
.img_float_left {
    clear: left;
    float: left;
    margin: 0 8px 10px 0;
}
 
.img_float_right {
    clear: right;
    float: right;
    margin: 0 0 10px 8px;
}
 
.submit {
    cursor: pointer;
}
 
.main {
    margin: 0 0 0 10px;
}
 
.button_1 {
    background: url("../images/button.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    border: medium none;
    height: 20px;
    line-height: 20px;
    width: 52px;
}
 
.button_2 {
    background: url("../images/shade.png") repeat-x scroll left -150px #320A0B;
    border: 1px solid #861313;
    color: #FFFFFF;
    height: 21px;
    line-height: 21px;
    padding: 0 10px;
}
 
.button_search {
    background: url("../images/search.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 20px;
    width: 20px;
}
 
.button_3 {
    background: url("../images/button.png") no-repeat scroll left -100px rgba(0, 0, 0, 0);
    color: #C80000;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    padding-left: 24px;
    text-decoration: none;
    width: 65px;
}
 
.button_4 {
    background: url("../images/button.png") no-repeat scroll left -150px rgba(0, 0, 0, 0);
    color: #FFFFFF;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding-left: 23px;
    text-decoration: none;
    width: 93px;
}
 
.button_4:hover {
    color: #FFFFFF;
}
 
.button_5 {
    background: url("../images/shade.png") repeat-x scroll left -250px #320A0B;
    border: medium none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    height: 26px;
    line-height: 26px;
    padding: 0 20px;
}
 
.title_1 {
    color: #990000;
    font-size: 13px;
}
 
.title_2 {
    background-color: #F2F2F2;
    padding: 5px 20px;
}
 
.title_3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}
 
.side .title_3 {
    padding: 0 10px;
}
 
.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}
 
 
.wrapper:after, .nav:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}
 
 
.prodlist {
    margin-top: 0;
    overflow: hidden;
    width: 740px;
}
 
.prodlist ul {
    margin: 0 0 -1px -1px;
    overflow: hidden;
}
 
.prodlist li {
    border-bottom: 1px solid #DCDCDC;
    float: left;
    width: 246px;
}
 
.prodlist li .prod {
    border-left: 1px solid #DCDCDC;
    height: 206px;
    margin: 10px 0 20px;
    padding: 5px 20px 0;
}
 
.prodlist li a {
    color: #990000;
    display: block;
    font-size: 12px;
    height: 153px;
    margin-bottom: 5px;
    text-decoration: none;
}
 
.prodlist li a strong {
    color: #535252;
    display: block;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
}
 
.prodlist li a strong span {
    color: #555555;
    font-size: 11px;
    font-weight: normal;
}
 
.prodlist li img {
    display: block;
    margin: 3px auto;
}
 
.prodlist li .intro {
    height: 52px;
    overflow: hidden;
}
 
.prodlist li .price {
    color: #990000;
    font-size: 12px;
    font-weight: bold;
}
 
.prodlist .new .prod {
    background: url("../images/ico_prodnew.png") no-repeat scroll right top rgba(0, 0, 0, 0);
}
 
.prodlist .hot .prod {
    background: url("../images/ico_prodhot.png") no-repeat scroll right top rgba(0, 0, 0, 0);
}
 
.prodlist .newhot .prod {
    background: url("../images/ico_prodnewhot.png") no-repeat scroll right top rgba(0, 0, 0, 0);
}
 
.prodlist_2 {
    border: 1px solid #CCCCCC;
    margin: -5px 0 10px;
    width: auto;
}
 
.prodlist_2 li {
    border: medium none;
    height: 143px;
    overflow: hidden;
    width: 184px;
}
 
.prodlist_2 li .prod {
    height: auto;
    margin: 0;
}
 
.prodlist_2 li a {
    height: auto;
}
 
.prodlist_2 li img {
    width: 90px;
}
 
.prodscroll {
    overflow: visible;
}
 
.prodscroll .jcarousel-clip-out {
    padding-left: 16px;
}
 
.prodscroll ul {
}
 
.prodscroll li {
    width: 236px;
}
 
.prodintro {
    margin: 20px 0;
    overflow: hidden;
    padding-top: 100;
    position: relative;
}
 
.prodintro .text {
    float: left;
}
 
.prodintro .text .edittext {
    margin-bottom: 10px;
}
 
.prodintro .text h3 {
    color: #F60002;
    font-size: 14px;
    margin-bottom: 5px;
    width: 360px;
}
 
.prodintro .text h3 span {
    color: #555555;
    font-size: 11px;
    font-weight: normal;
}
 
.prodintro .text h4 {
    font-size: 12px;
}
 
.prodintro .text .imglist {
    margin-bottom: 10px;
    overflow: hidden;
}
 
.prodintro .text .imglist a {
    float: left;
    margin: 0 5px 5px 0;
}
 
.prodintro .text .imglist a img {
    border: 1px solid #CCCCCC;
}
 
.prodintro .text .imglist a.cur img {
    border-color: #FF3300;
}
 
.prodintro .text .certlist, .prodintro .text div {
    width: 360px;
}
 
.prodintro .text .certlist img {
    margin-right: 2px;
}
 
.prodintro .img {
    display: inline;
    float: right;
    margin-right: 20px;
}
 
.prodintro .bigimg {
    height: 302px;
    width: 300px;
}
 
.prodintro .bigimg img {
}
 
.prodintro .hot, .prodintro .new, .prodintro .newhot {
    background: url("..Jonathan Weindel") no-repeat scroll left top rgba(0, 0, 0, 0);
    height: 95px;
    position: absolute;
    right: 0;
    top: 0;
    width: 95px;
}
 
.prodintro .new {
    background-image: url("../images/ico_prodnew3.png");
}
 
.prodintro .newhot {
    background-image: url("../images/ico_prodnewhot2.png");
}
 
.prodintro .edittext {
    min-height: 80px;
}
 
.prodctrl {
}
 
.prodctrl .imgbot {
    padding: 5px 0;
}
 
.prodctrl .send {
    background: url("../images/ico.png") no-repeat scroll left -197px rgba(0, 0, 0, 0);
    padding-left: 15px;
    text-decoration: none;
}
 
.prodctrl .print {
    background: url("../images/ico.png") no-repeat scroll left -247px rgba(0, 0, 0, 0);
    margin-left: 30px;
    padding-left: 15px;
    text-decoration: none;
}
 
.prodctrl .price {
    border: 1px solid #CCCCCC;
    color: #A40000;
    display: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 0 20px;
}
 
.prodctrl .add {
    background: url("../images/button.png") repeat-x scroll left -50px #7BCC70;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    margin: 50px 0 0;
    padding-left: 35px;
    text-decoration: none;
    width: 128px;
}
 
.prodctrl .add span {
}
 
.tab_1 {
    background: url("../images/shade.png") repeat-x scroll left top rgba(0, 0, 0, 0);
    height: 26px;
    margin-bottom: 10px;
    padding: 6px 20px 0;
}
 
.tab_1 a {
    background: url("../images/shade.png") repeat-x scroll left -50px rgba(0, 0, 0, 0);
    float: left;
    height: 26px;
    line-height: 26px;
    margin-right: 2px;
    padding: 0 30px;
    text-decoration: none;
}
 
.tab_1 .cur {
    background-position: left -100px;
    color: #FFFFFF;
}
 
.proddetail {
    position:relative;
	margin-bottom: 0;
    min-height: 400px;
}
 
.tab_1_text {
    display: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
 
.tab_2 {
    background: url("../images/shade.png") repeat-x scroll left top rgba(0, 0, 0, 0);
    height: 26px;
    margin-bottom: 10px;
    padding: 6px 20px 0;
}
 
.tab_2 a {
    background: url("../images/shade.png") repeat-x scroll left -50px rgba(0, 0, 0, 0);
    float: left;
    height: 26px;
    line-height: 26px;
    margin-right: 2px;
    padding: 0 30px;
    text-decoration: none;
}
 
.tab_2 .cur {
    background-position: left -100px;
    color: #FFFFFF;
}
 
.relateitems {
    overflow: hidden;
    padding: 10px 0 0;
}
 
.relateitems li {
    border-bottom: 1px dotted #DCDCDC;
    display: inline;
    float: left;
    margin-left: -1px;
    width: 236px;
}
 
.relateitems .prod {
    border-left: 1px dotted #DCDCDC;
    height: 149px;
    margin: 20px 0;
    overflow: hidden;
    padding: 0 20px;
}
 
.relateitems li a {
}
 
.relateitems li a strong {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
}
 
.relateitems li a img {
    float: right;
    margin-left: 10px;
}
 
.relateitems li .price {
    display: none;
}
 
.detailbot {
    border-bottom: 1px dotted #88898D;
    overflow: hidden;
    padding-bottom: 10px;
    width: 700px;
}
 
.detailbot h3 {
    font-size: 14px;
}
 
.back {
    padding-top: 10px;
}
 
.back a {
    background-color: #CCCCCC;
    display: block;
    padding: 3px 0;
    text-align: center;
    text-decoration: none;
    width: 70px;
}
 
.solutionlist {
    overflow: hidden;
    padding-left: 20px;
}
 
.solutionlist ul {
    overflow: hidden;
}
 
.solutionlist ul li {
    background: url("../images/line_y_1.gif") repeat-y scroll left top rgba(0, 0, 0, 0);
    float: left;
    height: 190px;
    margin-bottom: 25px;
    margin-left: -1px;
    padding: 5px 16px 0;
    text-align: justify;
    width: 205px;
}
 
.solutionlist ul li h5 {
    font-size: 14px;
    margin-bottom: 10px;
}
 
.solutionlist ul li .img {
    border: 1px solid #CCCCCC;
    display: block;
    margin: 0 auto 10px;
}
 
.solutionlist ul li .text {
    height: 86px;
    line-height: 1.2;
    overflow: hidden;
}
 
.contactbox {
}
 
.contactsub {
    background: url("../images/line_y_1.gif") repeat-y scroll right top rgba(0, 0, 0, 0);
    float: left;
    padding-bottom: 50px;
    width: 480px;
}
 
.contactbox h4 {
    color: #990000;
    font-size: 12px;
    margin-bottom: 5px;
}
 
.contactinfo {
    float: left;
    padding-left: 10px;
    width: 210px;
}
 
.faqtop {
    background: url("../images/bg_1.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
    margin-bottom: 10px;
    min-height: 110px;
    padding: 0 0 0 200px;
}
 
* html .faqtop {
    height: 110px;
}
 
.faqtop h4 {
    color: #990000;
    font-size: 16px;
    font-weight: normal;
}
 
.faqlist {
}
 
.faqlist dt {
    background: url("../images/bg_2.gif") repeat scroll left top rgba(0, 0, 0, 0);
    color: #990000;
    font-weight: bold;
    padding: 5px 10px;
}
 
.faqlist dt span {
    background: url("../images/ico_faq.gif") no-repeat scroll -37px top rgba(0, 0, 0, 0);
    padding-left: 20px;
}
 
.faqlist dd {
    background: url("../images/ico_faq.gif") no-repeat scroll 10px -32px rgba(0, 0, 0, 0);
    border-bottom: 1px dotted #CCCCCC;
    padding: 5px 0 20px 30px;
}
 
.succeedbox {
    background: url("../images/img_succeed.gif") no-repeat scroll 100px 50px #F0F0F0;
    border: 1px solid #7A7A7A;
    margin-top: 50px;
    padding: 50px 0 50px 160px;
}
 
.succeedbox strong {
    display: block;
    font-size: 24px;
    margin-bottom: 18px;
}
 
.succeedbox a {
    color: #F50000;
    font-size: 14px;
}
 
.ul_1 {
    margin-left: 20px;
}
 
.ul_1 li {
    background: url("../images/ico.png") no-repeat scroll left -88px rgba(0, 0, 0, 0);
    padding: 5px 0 5px 10px;
}
 
.ul_1 li a {
    color: #990000;
    margin: 0 0 0 10px;
}
 
.mapwrap_top {
    border-bottom: 1px solid #9F9F9F;
    margin-bottom: 40px;
    padding-bottom: 20px;
}
 
.mapwrap_bot {
}
 
.mapwrap {
    margin-bottom: 30px;
    overflow: hidden;
}
 
.mapwrap .map {
    display: none;
    float: left;
    margin-left: -425px;
    width: 480px;
}
 
.mapwrap .title {
    font-size: 14px;
}
 
.mapwrap .text {
    margin-bottom: 10px;
}
 
.mapwrap_out {
    overflow: hidden;
}
 
.mapwrap_out h1 {
    color: #CB0000;
    font-size: 16px;
    margin-bottom: 10px;
}
 
.mapwrap_left {
    float: left;
    width: 350px;
}
 
.mapwrap_right {
    float: right;
    width: 350px;
}
 
.map .close {
    background: url("../images/ico_closd.gif") no-repeat scroll left top rgba(0, 0, 0, 0);
    height: 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
}
 
.textbox_1 {
    overflow: hidden;
}
 
.textbox_1 .img {
    border-left: 1px dotted #88898D;
    float: right;
    margin-left: 20px;
    padding: 0 15px;
}
 
.textbox_2 {
    background-color: #F1F1F1;
    color: #AB3030;
    margin: 5px 0 20px;
    padding: 8px;
}
 
.textbox_3 {
    border-bottom: 1px dotted #CCCCCC;
    border-top: 1px dotted #CCCCCC;
    padding: 10px 0;
}
 
.textbox_3 table {
    margin: 0 auto;
}
 
.textbox_3 table th, .textbox_3 table td {
    padding: 3px 5px;
}
 
.textbox_3 table th {
    text-align: right;
}
 
.textbox_3 table td {
}
 
.table_1 thead td {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #555555;
    font-weight: bold;
    text-align: center;
}
 
.table_1 th, .table_1 td {
    padding: 5px 10px;
}
 
.table_1 th {
    border-right: 1px dotted #CCCCCC;
    font-weight: normal;
    text-align: right;
}
 
.table_1 td {
}
 
.table_1 .bg {
    background-color: #F7F7F7;
}
 
.table_4 {
    border-collapse: collapse;
}
 
.table_4 td {
    border: 1px solid #CCCCCC;
}
 
.table_2 {
}
 
.table_2 th, .table_2 td {
    padding: 5px;
    vertical-align: top;
}
 
.table_2 th {
    font-weight: normal;
    text-align: right;
}
 
.table_2 td {
}
 
.table_2 .tips {
    background: url("../images/ico.png") no-repeat scroll left -150px #A40035;
    color: #EDCCD7;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-left: 10px;
    padding: 0 10px 0 35px;
}
 
.table_2 tfoot .submit {
    margin-right: 5px;
    overflow: visible;
}
 
.table_2 tfoot .reset {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color -moz-use-text-color #A40035;
    border-image: none;
    border-style: none none dotted;
    border-width: medium medium 1px;
    cursor: pointer;
}
 
.table_2 .input {
    width: 200px;
}
 
.table_2 .input, .table_2 .textarea {
    background-color: #F1F1F1;
    border: 1px solid #ABABAB;
    padding: 3px;
}
 
.table_3 {
    margin-bottom: 20px;
}
 
.table_3 th, .table_3 td {
    padding: 10px 8px;
}
 
.table_3 th {
}
 
.table_3 td {
}
 
.table_3 thead td {
    background-color: #F5F5F5;
    font-size: 12px;
    font-weight: bold;
}
 
.table_3 tfoot td {
    background-color: #F5F5F5;
    font-weight: bold;
    text-align: right;
}
 
.table_3 tbody td {
    border-bottom: 1px solid #CCCCCC;
}
 
.table_3 .img {
    border: 1px solid #88898D;
}
 
.table_3 .input {
    width: 50px;
}
 
.table_5 {
}
 
.table_5 th, .table_5 td {
    padding: 8px 20px;
}
 
.table_5 th {
}
 
.table_5 td {
}
 
.table_5 .bg {
    background-color: #EFEFEF;
}
 
.turnpage {
    padding: 15px 20px;
    text-align: right;
}
 
.turnpage a {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #666666;
    margin: 0 1px;
    padding: 2px 7px;
    text-decoration: none;
}
 
.turnpage a:hover, .turnpage a.cur {
    background: none repeat scroll 0 0 #B20000;
    border: 1px solid #B20000;
    color: #FFFFFF;
}
 
.paginal {
    padding: 10px 20px;
    text-align: center;
}
 
.paginal ul {
}
 
.paginal li {
    display: inline;
}
 
.paginal a {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 0 1px;
    padding: 2px 7px;
    text-decoration: none;
}
 
.paginal .selected a {
    background: none repeat scroll 0 0 #B20000;
    border: 1px solid #B20000;
    color: #FFFFFF;
}
 
.paginal .prev, .paginal .next {
}
 
.printbutton {
    background: url("../images/shade.png") repeat-x scroll left -104px rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    float: right;
    font-size: 14px;
    padding: 2px 20px;
}
 
.errorMessage {
    background: none repeat scroll 0 0 #FBE3E4;
    border: 1px solid #FBC2C4;
    color: #8A1F11;
    display: inline;
    margin-left: 10px;
    padding: 2px 5px;
}
 
.downsearch {
    background: url("../images/bg_3.gif") no-repeat scroll center top rgba(0, 0, 0, 0);
    height: 45px;
    margin-bottom: 30px;
    margin-top: 15px;
    padding: 20px 0 0 80px;
}
 
.downbox {
    border-bottom: 1px solid #D9D9D9;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 20px;
}
 
.downbox .img {
    float: left;
    font-weight: bold;
    text-align: center;
    width: 160px;
}
 
.downbox .img img {
    display: block;
    margin: 0 auto 5px;
}
 
.downbox .img span {
    display: block;
}
 
.downbox table {
    float: right;
}
 
.downbox table td {
    padding: 8px 5px;
}
 
.downbox table .bg_1 {
    background-color: #EFEFEF;
}
 
.newslist {
    margin-bottom: 10px;
}
 
.newslist li {
    border-bottom: 1px dashed #CCCCCC;
    overflow: hidden;
    padding: 8px 10px;
    text-align: right;
}
 
.newslist li a {
    float: left;
    text-align: left;
    text-decoration: none;
    width: 600px;
}
 
.newslist li .date {
    color: #999999;
}
 
.newslist li:hover {
    background-color: #F5F5F5;
}
 
.detailtitle {
    border-bottom: 1px dashed #CCCCCC;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
}
 
.detailtitle h1 {
    font-size: 24px;
}
 
.detailtitle .date {
    color: #999999;
}
 
.detailbot2 {
    padding-top: 50px;
}
 
.detailbot2 div {
    border-bottom: 1px solid #CCCCCC;
    padding: 5px 0;
}
 
.detailbot2 .back {
    text-align: right;
}
 
.detailbot2 .back a {
    color: #E04136;
}
 
.detailbot2 .prev, .detailbot2 .next {
}
 
.detailbot2 span {
    color: #E04136;
    margin-right: 10px;
}
 
.c_title {
    background: url("../images/line1.png") repeat-x scroll left bottom rgba(0, 0, 0, 0);
    margin: 10px 0 15px;
}
 
.c_title span {
    background: url("../images/ico1.gif") no-repeat scroll left 4px rgba(0, 0, 0, 0);
    color: #3C3C3C;
    display: block;
    font-size: 14px;
    padding-left: 15px;
}
 
.c_title .more {
    float: right;
    margin-top: 8px;
}
 
.indnewslist {
    margin-top: -10px;
}
 
.indnewslist li {
    background: url("../images/ico2.png") no-repeat scroll 5px 12px #FFFFFF;
    border-bottom: 1px dotted #C1C1C1;
    padding: 5px 5px 5px 15px;
}
 
.indnewslist li span {
    float: right;
}
 
.indnewslist li a {
    text-decoration: none;
}
 
.indnewslist li a:hover {
    color: #E24F23;
    text-decoration: underline;
}
 
.indprodlist {
    height: 155px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 750px;
}
 
.indprodlist .jcarousel-clip-out {
}
 
.indprodlist ul {
}
 
.indprodlist li {
    border: 1px solid #CDCDCD;
    float: left;
    height: 140px;
    margin-right: 6px;
    overflow: hidden;
    padding: 5px 0;
    text-align: center;
    width: 130px;
}
 
.indprodlist li img {
    display: block;
    font-size: 0;
    height: 120px;
    margin: 0 auto 5px;
    width: 120px;
}
 
.indprodlist li a {
    color: #FF6000;
    text-decoration: none;
}
 
.indprodlist .intro {
    display: none;
}
 
.categorylist {
    overflow: hidden;
}
 
.categorylist li {
    float: left;
    height: 150px;
    margin-right: 75px;
    padding-left: 40px;
    width: 260px;
}
 
.categorylist li .img {
    display: block;
    margin-bottom: 5px;
}
 
.categorylist li .img img {
    height: 104px;
    width: 259px;
}
 
.categorylist li .title {
    background: url("../images/ico_3.gif") no-repeat scroll 5px 3px rgba(0, 0, 0, 0);
    color: #FF0000;
    display: block;
    padding-left: 25px;
    text-decoration: none;
}
 
.table_spec {
    border-collapse: collapse;
}
 
.table_spec th, .table_spec td {
    border: 1px solid #CCCCCC;
    padding: 2px 8px;
}
 
.table_spec th {
    background-color: #DEDEDE;
}
 
.table_spec td {
}
 
.table_spec tr.bg {
    background-color: #EFEFEF;
}
 
.edittext:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}
 
.edittext {
}
 
.edittext, .edittext p {
    line-height: 1.5;
}
 
.edittext a {
    text-decoration: underline;
}
 
.edittext ul {
    list-style-type: disc;
    margin-bottom: 1em;
}
 
.edittext ul li {
    margin-left: 25px;
}
 
.edittext ul ul {
    list-style-type: circle;
}
 
.edittext ul ul ul {
    list-style-type: square;
}
 
.edittext ol {
    list-style-type: decimal;
}
 
.edittext ol li {
    margin-left: 25px;
}
 
.edit_table1, .edit_table2, .edit_table3 {
    border-collapse: collapse;
}
 
.edit_table1 th, .edit_table1 td {
    border: 1px solid #000000;
}
 
.edit_table2 th, .edit_table2 td {
    border: 1px solid #CCCCCC;
}
 
.edit_table3 th, .edit_table3 td {
    border: 1px solid #FFFFFF;
}
 
.edittext .ul_nostyle {
    list-style-type: none;
}
 
.edittext .ul_nostyle li {
    margin-left: 0;
}

Thanks a bunch!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

well, it has nothing to do

well, it has nothing to do with your cctv.css file.
It does do have something to do with your style.css

on line 6 on your style.css file is says:

#container {
	margin: 0 auto;
	width:900px;
	height:auto;
	background-color:#000000;
	font-family:avenir, sans-serif;
	}	

As you can see background-color: #000000; means that the background color is black.
I think this solves your problem, so open the style.css and change it from background-color: #000000; to background-color: #FFFFFF;

Cheers, Henk

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

What about this? #container

What about this?

#container {
  background-color: #000000;
  font-family: avenir,sans-serif;
  height: auto;
  margin: 0 auto;
  width: 900px;
  }
Its descendents have the default transparent backgrounds, so black shows through.

The p element is set at 700px width, delete it. Its overflow is causing the overlap.

p, h2, tr, pblue {
  font-family: Avenir;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 5px;
  padding: 5px;
  }

Set the ul to {overflow: hidden;} so it doesn't underflow the float element on the left.

.edittext ul {
  list-style-type: disc;
  margin-bottom: 1em;
  overflow: hidden;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

magicman
magicman's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT-7
Joined: 2012-06-27
Posts: 7
Points: 12

helldog and gary.turner thanks

BTW, the container was previously set to black but that is the container. The page containing the contents style, that information that starts under the menu, was never black was always white. The black would be running on the outside of that and under the footer.

I will change the background color to FFFFFF. Gary, thanks for the heads up on the ul. Will get that corrected.

Lastly, does a tool or special plug-in that exist that searches for css code that matches html code that is highlighted and saves and also, saves that css code? Would have lots of time picking out the css from a huge page. I am a reseller of the cameras.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

Firebug

There is an addon to Firefox that does all you want. The code I posted above was found by selecting the element on the page which gave me the html in one panel and all the css that applies to that element in another. A click copies the ruleset to the clipboard. See https://addons.mozilla.org/en-US/firefox/addon/firebug/?src=userprofile

Firefox now has a similar function built in, but I don't think it works as well as the addon.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.