2 replies [Last post]
kategorgeous
kategorgeous's picture
Offline
newbie
United Kingdom
Last seen: 4 years 24 weeks ago
United Kingdom
Timezone: GMT+1
Joined: 2015-03-12
Posts: 6
Points: 8

Hi, I am trying to move the following site: http://www.crictours.com/ which is currently table based (and about 15 years old) to a div based layout so that I can make it more mobile responsive but I am having difficulties with styling my divs - I have created a new home page (http://www.crictours.com/index-new.html) but, as you can see, there is a nasty black line down the right hand side where I want it to be white.

I have attached the html file and here is the css code for the main stylesheet:

body {
    background-image: url(images/bg.gif);
    background-position: center;
    background-attachment: fixed;
	margin: auto;
	text-align:center;
 
    }
 
p {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 9px;
	text-align:left;
}
 
#maincontent {
	width: 800px;
	margin:0px auto;
} 
 
#wrapper {
	margin: auto;
	text-align:center;
	width: 800px;
	box-shadow: 0 0 10px #222;
	background-color: #ffffff;
 
 
}
 
 
 
#header {
	background: url(images/smallball.png) no-repeat ;
}
#newtitle {
		font-family: "Times New Roman", Times, serif;
	font-variant:small-caps;
  color: #000000;
	font-size: 50px;
	margin: 0px 20px 0px 20px;
	font-weight:normal;
	text-align:right;
	height: 73px;
	letter-spacing: -2px;
}
 
#content {
	width: 100%;
	background: #ffffff;
 
}
 
#content div {
	float: left;
	background: #ffffff;
}
 
#content-left {
		background: #ffffff url(images/index/index-top-left-cwc-07-tall.jpg) no-repeat !important;
		width:390px;
		padding-right: 8px;
  padding-bottom: 50px;  /* X + padding-bottom */
  margin-bottom: -50px;  /* X */
}
 
 
#content-right {
		background: #ffffff;	
		width: 390px;
		padding-left: 8px;
		display: block;
}
 
#title {
	background: url(images/smallball.png) no-repeat ;
	font-family: "Times New Roman", Times, serif;
	font-variant:small-caps;
  color: #000000;
	font-size: 50px;
	margin: 0px 20px 0px 20px;
	font-weight:normal;
	text-align:right;
	height: 73px;
	letter-spacing: -2px;
 
}
 
#strapline {
	font-family: "Times New Roman", Times, serif;
	font-variant:small-caps;
  color: #000000;
	font-size: 18px;
	margin: -20px 20px 0px 20px;
	text-align:right;
	font-weight:normal;
}
 
 
a:link	{
	color:#F00;
}
 
h1 {
	font-family: verdana, arial, helvetica, sans-serif;
	color: #336699;
	font-size: 12px;
}
 
h2 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
}
 
p            {  line-height: 2}
 
h3 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	margin-bottom: 0px;
}
 
h4 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	margin-bottom: 0px;
	color:#F00;
}
 
h4 a { color:#F00;
}
 
 
 
.footertext td,
.footertext, 
.footertext span,
.footertext p {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	line-height: 110%;
	color:#FFF;
	font-weight: bold;
	background-color:#000;
	text-align:center;
}
 
.tourtable,
.tourtable td {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	text-align: justify;
	margin: 8px;
	vertical-align:top;
	line-height:135%;
	   border: 1px solid black;
	   border-collapse: collapse;
	   background-color: #CBDDE8;
}
 
.tourtable td a {
	color:#F00;
}
 
 
 
.tourtable th {
	background-color: #5E9FBF;
	font-size: 14px;
}
 
 
.tourtable p {
		font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10pt;
	text-align: justify;
	margin-left: 0px;
	margin-right: 8.5px;
	vertical-align:top;
		line-height:115%;
		padding: 0px;
		margin-top: 0px;
}
 
 
 
.tourtable h4 {
	color:#000;
	font-weight: bold;
 
}
 
.tourtable h6 {
	color:#F00;
	font-weight: bold;
	font-size:12px;
	padding: 0px;
	margin: 0px;
}
 
.bodytext160h {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px; 
	line-height: 130%;
	text-align: justify;
	margin: 8px;
	vertical-align:top;
 
}
 
.bodytext160h ul {
	margin: 0px;
	padding: 0px;
}
.bodytext160h span {
		font-size: 10px;
	border: rgba(12,11,11,1.00) ridge 1.5px;
	padding: 0px 7px 0px 7px;
	background-color: #CBDDE8;
 
}
 
.bodytext160h a:link   { 
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	color:#F00;
	font-size: 9pt; 
	line-height: 110%;
}
 
 
.bodytext160h a:visited   { 
	font-family: verdana, arial, helvetica, sans-serif;
	color: #CC0000;
	font-size: 8pt; 
	line-height: 110%;
}
.bodytext160hl a:link   { 
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	color:#F00;
	font-size: 8pt; 
	line-height: 110%;
}
 
.bodytext160hl a:visited   {
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000;
	font-size: 8pt;
	line-height: 110%;
}
 
.bodytexttestimquote    { 
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
    font-size: 8pt;
	display:block;
	padding-right: 10px;
	margin-bottom:10px;
}
 
.bodytexttestimsource    { 
	font-family: verdana, arial, helvetica, sans-serif;
	color: #336699;
    font-size: 8pt; 
	display: block;
	font-style: italic;
}
 
.footer,
.footer a { 
	font-family: arial, verdana, helvetica, sans-serif;
	text-decoration: none;
	color:#CCC;
	font-size: 10px; 
	font-weight: normal;
	line-height: 110%;
	text-align:center;
}
.footernew td   { 
	font-family: Verdana, Geneva, sans-serif;
	text-align:center;
	text-decoration: none;
	color:#CCC;
	font-size: 10px; 
	font-weight: normal;
	line-height: 110%;
	text-align:center;
}
.upperfooter   { 
	font-family: arial, verdana, helvetica, sans-serif;
	text-decoration: none;
	color:#CCC;
	font-size: 10px; 
	font-weight: normal;
	line-height: 110%;
	text-align:center;
}
 
    #tabsE {
      float:left;
	  width:100%;
      background:#000;
      line-height:normal;
      font: bold 11px Verdana;
      }
 
    #tabsE ul {
	margin:0;
	padding: 3px 10px 0px 112px;
	list-style:none;
	}
    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }
 
    #tabsE a {
      float:left;
      background:url('images/tableftE.gif') no-repeat left top;
      margin:0;
      text-decoration:none; padding-left:2px; padding-right:0; padding-top:0; padding-bottom:0
      }
    #tabsE a span {
      float:left;
      display:block;
      background:url('images/tabrightE.gif') no-repeat right top;
      color:#FFF; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px
      }
 
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      }
 
/*- End: Top Nav Menu code--------------------------- */
 
 
#bottom_logos {
	text-align:center;
	padding: 0;
 
 
}
 
 
 
#ATOL { 
	display: none;
	padding: 2;
	font-size:9px;
	font-family: verdana, arial, helvetica, sans-serif;
	border-width: 1;
	border-style: solid;
	border-color:#FFF;
	background-color: #CC0000;
	color:#FFF;
	position: absolute;
	top: 550;
	left: 950;
	width: 160;
	height: 140;
	z-index: 999;
}
 
 
 
#navDiv {
	font-family: verdana, arial, helvetica, sans-serif;
			background-color:#5E9FBF;
 
	font-size: 10px;
		color: #FFF;
	font-weight:bold;
	text-shadow:1px 1px #737373;
 
}
 
 
 
 #navDiv ul {
        list-style-type: none;
        margin: 0;
        padding: 3px;
 
        }
    #navDiv ul li {
		color: #F70408;
        width: 100%;
        position: relative;
		border: 1px rgba(94,159,191,1.00);
        }
    #navDiv ul ul {
        position: absolute;
        left: 185px;
        top: 0;
		border: 1px rgba(94,159,191,1.00);
 
        }
 
#navDiv ul ul {
        display: none;
		border: 1px rgba(94,159,191,1.00);
        }
    #navDiv ul li:hover ul {
        display: block;
		background-color:#33F;
		border: 1px rgba(94,159,191,1.00);
        }
 
   #navDiv ul li.dynamicClass ul {
        display: block;
		color: #FFF;
 
        }
 
    #navDiv a {
        display: inline-block;  /* 'block' causes gaps in IE6 */
		text-decoration: none;
        width: 100%;  /* for IE6 */
		color: #FFF;
		padding-bottom: 8px;
        }
 
#navDiv a:hover {
		cursor: hand;
		background-color: #336699 ;
		display: block;
		width: 100%;
 
}
 
.rgradient3_r {
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(left, #FFFFFF 100%, #f07165 0%);
 
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(left, #FFFFFF 100%, #f07165 0%);
 
	/* Opera */ 
	background-image: -o-linear-gradient(left, #FFFFFF 100%, #f07165 0%);
 
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #f07165), color-stop(1, #FFFFFF));
 
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(right, #f07165 0%, #FFFFFF 100%);
 
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to left, #f07165 0%, #FFFFFF 100%);
	color:#000;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 16px;
	text-decoration:none;
	padding-left: 5px;
	text-align: left;
	border-top: solid 2px #9d0000;
 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorStr='#f07165', EndColorStr='#FFFFFF');
 
}
 
.rgradient3_l {
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(right, #FFFFFF 0%, #f07165 100%);
 
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(right, #FFFFFF 0%, #f07165 100%);
 
	/* Opera */ 
	background-image: -o-linear-gradient(right, #FFFFFF 0%, #f07165 100%);
 
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #f07165));
 
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #f07165 100%);
 
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to left, #FFFFFF 0%, #f07165 100%);
	color:#000;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 16px;
	text-decoration:none;
	padding-left: 5px;
	text-align: left;
	border-top: solid 2px #9d0000;
 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorStr='#f07165', EndColorStr='#FFFFFF');
 
}
 
 
 
 
.SideImage {
	border: none;
	margin-left: 8px;
	margin-top: 50px;
}
 
 
.title_gradient {
	background-image: url(images/bar-bg-360-24.gif);
}
 
 
#newfooter {
	clear: both;
		background: #ffffff;
		float:left;
		padding:10px;
		width: 780px;
	}
 
#newfooter a {
	float: left;
}
 
.phonefooter img {
	float: left;
	padding: 0px 25px 0px 25px;
	margin: 0px -10px 0px 0px;
}
 
.travel-logo img {
	float: right;
	padding: 0px 25px 0px 25px;
	margin: 0px -10px 0px 0px;
}
 
#bottom {
	background: #000000;
	color: #ffffff;
}
 
#copyright div {
	background: #000000!important;
}
 
#call-us {
	display: none;
}

Can anyone guide me please? Many thanks in advance
Kate

AttachmentSize
index-new.txt9.35 KB
xEEZYx
xEEZYx's picture
Offline
newbie
Last seen: 5 years 32 weeks ago
Joined: 2015-03-12
Posts: 2
Points: 3

#content { background:

#content {
    background: #ffffff;
    overflow: hidden;
    width: 100%;
}

As the content in side is floated #content effectively has a height of 0, overflow hidden will stop this.

Have a read about clearfix here:- http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

kategorgeous
kategorgeous's picture
Offline
newbie
United Kingdom
Last seen: 4 years 24 weeks ago
United Kingdom
Timezone: GMT+1
Joined: 2015-03-12
Posts: 6
Points: 8

great .. worked a treat. You

great .. worked a treat.

You are a lovely lovely person.

Thank you
Smile