Solved

Center a horizontial list, put a left border on the leftmost box

Posted on 2013-06-18
6
337 Views
Last Modified: 2013-06-18
2 things I cannot get to work
1.center the Horizontal list
2.put a left border on the left most cell in the list
this does not work for the left border:

#horzlist li:last-child a {
border-right: solid 1px #0066ff;
}

the page
http://roofgenius.com/RoofCalcWriter/test.asp
how can i fix this?
0
Comment
Question by:isnoend2001
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39258373
I think it will help you if you clean up your code a little.  This seems to work.

Working sample http://jsbin.com/oxuroj/1/edit

code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roofcalcwriter 10 screenshot</title>
<meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
<meta name="description"  content="RoofCalcWriter estimate screenshot">
<meta name="keywords" content="Roofing">

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style type= "text/css">
#menubox {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
nav.menu_table_nav { text-align: center; }

.menu_table_nav #horzlist a
{
	width:88px;
	height: 16px;
	padding:4px;
	padding-top: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border-left: solid 1px #0066ff;
	border-top: solid 1px #0066ff;
	border-bottom: solid 1px #0066ff;
}
/*border-top: solid 1px red;
border-bottom: solid 1px red;*/


#horzlist li:first-child a { border-left: solid 1px #0066ff; }
#horzlist li:last-child a { border-right: solid 1px #0066ff; }
/*div#horzlist li:first-child {
border-left:none; }*/

 #horzlist a:hover
{
	background-color: white;
	color:#F00;
}
#horzlist li { display:inline; }
.Bodywrap
{
	width: 965px;
	margin: 0 auto;
}
.thispage hr { margin-top: 80px;  width= 100%
}
</style>
<link href="../roof.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Bodywrap">
  <div style="float:Left"> <img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/> </div>
  <!--float-->
  <div style ="text-align:center"> 
    <script type="text/javascript"><!--

google_ad_client = "ca-pub-5860242097775343";

/* leaderboard728x90 */

google_ad_slot = "8943766566";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script> 
    <script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 
  </div>
  <!--aligncenter-->
  <div style="clear: both;"></div>
  <div style="margin-top:15px"></div>
  <div id="menubox">
    <nav class="menu_table_nav">
      <ul id="horzlist">
        <li><a href="http://roofgenius.com">Home</a></li>
        <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
        <li><a href="http://roofgenius.com/about.htm">About</a></li>
        <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
        <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
      </ul>
    </nav>
    <!--nav--> 
  </div>
  <!--menubox-->
  
  <div class="thispage">
    <hr>
  </div>
  <!--thispage--> 
</div>
<!--bodywrap-->
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39258380
This is even better  Working sample http://jsbin.com/oxuroj/2/edit


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roofcalcwriter 10 screenshot</title>
<meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
<meta name="description"  content="RoofCalcWriter estimate screenshot">
<meta name="keywords" content="Roofing">

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style type= "text/css">
#menubox {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
nav.menu_table_nav { text-align: center; }

.menu_table_nav #horzlist a
{
	width:88px;
	height: 16px;
	padding:4px;
	padding-top: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border: 1px solid #0066ff;
}
#horzlist li { display:inline; }
/*div#horzlist li:first-child {
border-left:none; }*/

 #horzlist a:hover
{
	background-color: white;
	color:#F00;
}
.Bodywrap
{
	width: 965px;
	margin: 0 auto;
}
.thispage hr { margin-top: 80px;  width= 100%
}
</style>
<link href="../roof.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Bodywrap">
  <div style="float:Left"> <img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/> </div>
  <!--float-->
  <div style ="text-align:center"> 
    <script type="text/javascript"><!--

google_ad_client = "ca-pub-5860242097775343";

/* leaderboard728x90 */

google_ad_slot = "8943766566";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script> 
    <script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 
  </div>
  <!--aligncenter-->
  <div style="clear: both;"></div>
  <div style="margin-top:15px"></div>
  <div id="menubox">
    <nav class="menu_table_nav">
      <ul id="horzlist">
        <li><a href="http://roofgenius.com">Home</a></li>
        <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
        <li><a href="http://roofgenius.com/about.htm">About</a></li>
        <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
        <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
      </ul>
    </nav>
    <!--nav--> 
  </div>
  <!--menubox-->
  
  <div class="thispage">
    <hr>
  </div>
  <!--thispage--> 
</div>
<!--bodywrap-->
</body>
</html>

Open in new window

0
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 250 total points
ID: 39258382
You are using the same css file in the page and also in the roof.css file that's why I delete some of them and attach the css to the roof.css file see below:
Your HTML page:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Roofcalcwriter 10 screenshot</title>
    <meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
   <meta name="description"  content="RoofCalcWriter estimate screenshot">
    <meta name="keywords" content="Roofing">
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link href="roof.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <div class="Bodywrap">
<div style="float:Left">
<img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/>
</div><!--float-->
<div style ="text-align:center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* leaderboard728x90 */
google_ad_slot = "8943766566";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><!--aligncenter-->
<div style="clear: both;"></div>
<div style="margin-top:15px"></div>
<div id="menubox">
<nav class="menu_table_nav">
            	   <ul>
		            <li><a href="http://roofgenius.com">Home</a></li>
                    <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
                    <li><a href="http://roofgenius.com/about.htm">About</a></li>
                    <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
                    <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
				</ul>
            </nav><!--nav-->
</div><!--menubox-->
<div class="thispage">
<hr>
</div><!--thispage-->
</div><!--bodywrap-->
  </body>
</html>

Open in new window


And your roof.css file is:
/*  HTML5 reset  */

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 auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

a img{
	 border:0px;
 }
body{
	background:#FFF;
}
/* wrapper*/
#wrapper{
	width:100%;
	/*background:#999;*/
	clear:both;
}

/* header*/
header{
	width:100%;
	margin:0 auto;
	padding:8px 0 0 0;
}
header .header_area{
	width:965px;
}
.header_area .header_box1{
	width:113px;
	float:left;
	padding-top:88px;
	padding-right:65px;   
}
.header_area .header_box1 .logo{
margin-top:100px; /*added 05-07-13 */
 }

.header_area .header_box2{
	width:577px;
	float:left;	
}

.header_area .header_box3{
	width:145px;
	padding-top:20px;
	padding-left:65px;
	float:left;
    }
    
.header_area .header_box2 .ad_area{
	width:468px;
	height:50px;
	padding-top:10px;
}
.header_area .header_box2 h1{
	color:#F00;
	font:bold 24px "Times New Roman", Times, serif;
    font-style: italic;
    text-align: center;
}
.header_area .header_box2 h2{
	color: #000099;
	font:12px/22px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
}
.header_area .header_box2 h3{
	color: #000099;
	font:12px/40px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
	padding-top:10px;
}
.header_area .header_box2 p{
	color: #000099;
	font:bold 16px Arial, Helvetica, sans-serif;
	text-align:center;
}
.header_area .header_box3 h1{
	font:12px Verdana, Geneva, sans-serif;
    font-weight: 600;
	color:#000;
	text-align:center;
}

.header_area .header_box3 p{
		text-align: center;
}

.header_area .header_box3 p a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.header_area .header_box3 p a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
header hr{
	width:965px;
}

/* section*/
section{
	width:100%;
}
section .section_area{
	width:965px;
	background:#FFF;
	padding-bottom:10px;
}
.section_area .leftpanel{
	width:190px;
	margin-right:10px;
	float:left;
	padding-bottom:10px;
}

.section_area .middlepanel{
	width:488px;
	padding-right:5px;
	padding-left:5px;
	float:left;
	padding-bottom:10px;
}
.section_area .rightpanel{
	width:257px;
	padding-left:10px;
	float:left;
	padding-bottom:10px;
}

.section_area .leftpanel h1{
	font:12px Verdana, Geneva, sans-serif;
	font-weight:600;
	color:#000;
	text-align:center;
	padding-top:10px;
}
.section_area .leftpanel .roof_estimating{
	width:180px;
	margin-top:15px;
	border:1px solid #0066ff;
	margin-left:0;
}
.section_area .leftpanel .roof_estimating h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}
.section_area .leftpanel .roof_estimating ul{
	list-style-type:none;
	padding:4px 8px;
}
.section_area .leftpanel .roof_estimating li{
	line-height:13px;
}
.section_area .leftpanel .roof_estimating li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.section_area .leftpanel .roof_estimating li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
.section_area .leftpanel .popular_roof{
	width:180px;
	padding-top:15px;
	margin-left:0px;
}
.section_area .leftpanel .popular_roof h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#8f4b0e;
	text-align:center;
	padding-top:9px;
}

.section_area .leftpanel .popular_roof .popular_area{
	border:1px solid #8f4b0e;
	padding:8px 0px;
}

.section_area .leftpanel .popular_roof .popular_area p{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 500;
    text-decoration: none;
	color:#000;
	padding:0px 4px;
}

.section_area .leftpanel .popular_roof .popular_area p a{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.section_area .leftpanel .popular_roof .popular_area p a:hover{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
.section_area .leftpanel .popular_roof .popular_area ul{
	padding:14px 0;	
}

.section_area .leftpanel .popular_roof .popular_area li{
	line-height:13px;
	/*list-style:inside url(images/bullet_ball_blue.gif);*/
	list-style-type:none;
	background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
}

.section_area .leftpanel .popular_roof .popular_area li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
	margin:0 18px;	
}

.section_area .leftpanel .popular_roof .popular_area li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
	margin:0 18px;
}

.section_area .leftpanel .popular_roof .popular_area .roofing_tool img{
margin-left:33px;
border-style: solid;
border-width: 1px;
border-color: #8F4B0E	
}

.section_area .leftpanel .popular_roof .popular_area .roofing_tool p{
	font:12px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#000;
	padding-left:22px;
}

.section_area .leftpanel .popular_roof_ad{
	width:180px;
	padding-top:15px;
	padding-left:30px;
}

.section_area .leftpanel .popular_roof_video{
	width:180px;
	padding-top:15px;
}

.section_area .leftpanel .popular_roof_video img{
	padding-left:40px;
	padding-bottom:5px;
}

.section_area .leftpanel .popular_roof_video p a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .leftpanel .popular_roof_video p a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel h1{
	font:bold 17px Arial, Helvetica, sans-serif;
	color: #000080;
	padding-top:14px;
}

.section_area .middlepanel p{
	font:13px/18px Verdana, Geneva, sans-serif;
	color: #000;
	padding-top:18px;
}

.section_area .middlepanel h2{
	font:bold 13px Verdana, Geneva, sans-serif;
	color: #000;
	padding-top:18px;
}

.section_area .middlepanel h3{
	color: #FF9900;
	font:bold 18px 'EB Garamond', serif;
	line-height:4.063em;
	text-align:center;
}

.section_area .middlepanel h4{
	color:#000;
	font:bold 12px Verdana, Geneva, sans-serif;
	text-align:center;
}


.section_area .middlepanel figure{
	width:140px;
	padding-top:10px;
	text-align:center;
}


.section_area .middlepanel figure p{
	font:bold 13px Verdana, Geneva, sans-serif;
	color:#000;
}

.section_area .middlepanel figure a{
	color:#1C4FFF;
	font:10px Verdana, Geneva, sans-serif;
	text-align:center;
	text-decoration:none;
	font-weight:600;
	padding-left:8px;
}

.section_area .middlepanel figure a:hover{
	color:#F00;
	font:10px Verdana, Geneva, sans-serif;
	text-decoration:none;
	text-align:center;
	font-weight:600;
	padding-left:8px;
	background-color:#EEE;
}

.section_area .middlepanel .ad{
	width:300px;
	padding-top:5px;
}

.section_area .middlepanel a{
	font:13px/18px Verdana, Geneva, sans-serif;
	color: #1C4FFF;
	text-decoration:none;
	font-weight:600;
}

.section_area .middlepanel a:hover{
	font:13px/18px Verdana, Geneva, sans-serif;
	color:#F00;
	text-decoration:none;
	font-weight:600;
	background-color:#EEE;
}

.section_area .rightpanel .bid{
	width:257px;
	padding-top:15px;
}

.section_area .rightpanel .bid_proposal{
	width:257px;
	padding-top:15px;
}

.section_area .rightpanel .roof_calcwriter{
	width:180px;
	margin-top:15px;
	border:1px solid #0066ff;
	margin-left:0px;
}

.section_area .rightpanel .roof_calcwriter h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}

.section_area .rightpanel .roof_calcwriter ul{
	list-style-type:none;
	padding:4px 8px;
}

.section_area .rightpanel .roof_calcwriter li{
	line-height:13px;
}

.section_area .rightpanel .roof_calcwriter li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .rightpanel .roof_calcwriter li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area hr{
	width:965px;
	clear:both;
}

section .section_area .menu_table_ad{
	width:120px;
	padding-top:10px;
	float:left;
	background:#FFF;
}

section .section_area .middlepanel1{
	width:668px;
	padding:20px 25px 0 25px;
	float:left;
}

.middlepanel1 h1{
	font:12px Verdana, Geneva, sans-serif;
	padding:1.313em 0;
	color:#000;
	font-weight: 600;
	text-align:center;
}
.middlepanel1 .roofing_new_work{
	/*width:523px;*/
	width:560px;
	background:#FFF;
}
.roofing_new_work .row1{
	/*width:608px;*/
	border:1px solid #FB314D;
	background:#FFFFCC;
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
	clear:both;
}
.roofing_new_work .row1 .col1_new_work{
	width:164px;
	padding:13px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}
.roofing_new_work .row1 .col2_new_work{
	width:80px; /*width:68px;*/
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}
.roofing_new_work .row1 .col3_new_work{
	width:65px;
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}
.roofing_new_work .row1 .col4_new_work{
	border-right:none;
	padding:5px 0;
	width:64px;
	float:left;
	text-align:center;
}
/*start */
.roofing_new_work .row1 .col5_new_work{
	border-right:none;
	padding:5px 0;
	width:64px;
	float:left;
	text-align:center;
}

.roofing_new_work .row1 .col6_new_work{
	border-right:none;
	padding:3px;
	width:64px;
	float:left;
	text-align:center;
}

/*end */

.roofing_new_work .row2{
	/*width:608px;*/
	border:1px solid #CCC;
	border-top:none;
	background:#FFF;
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
	clear:both;
}

.roofing_new_work .row2 .col5_new_work{
	width:154px;
	padding:5px;
	float:left;
	border-right:1px solid #CCC;
	text-align:left;
}

.roofing_new_work .row2 .col6_new_work{
	width:68px;
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col7_new_work{
	width:65px;
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col8_new_work{
	border-right:none;
	padding:5px 0;
	width:64px;
	float:left;
	text-align:center;
}

.roofing_new_work .row2 .col9_new_work{
	width:68px;
	padding:13px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col10_new_work{
	width:65px;
	padding:13px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col11_new_work{
	border-right:none;
	padding:13px 0;
	width:64px;
	float:left;
	text-align:center;
}

.middlepanel1 .row3{
	border:1px solid #CCC;
}

.middlepanel1 .row3 h2{
	font:12px Verdana, Geneva, sans-serif;
	padding:0.9em 0;
	color:#000;
	font-weight:600;
	text-align:center;
}

.middlepanel1 .row3 p{
	font:11px/24px Verdana, Geneva, sans-serif;
	color:#000;
	text-align:left;
	margin:0 4px;
}

.middlepanel1 .row3 h3{
	text-decoration:none;
	font:12px Verdana, Geneva, sans-serif;
	padding:1.313em 0;
	color:#000;
	text-align:right;
	margin-right:4px;
}

.middlepanel1 .row3 a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.middlepanel1 .row3 a:hover{
	font:10px Verdana, Geneva, sans-serif;
	color:#F00;
	text-decoration:none;
	font-weight:600;
	background-color:#EEE;
}
/*footer*/
footer{
	width:100%;
}

footer .footer_area{
	width:965px;
	text-align:center;
}

.footer_area nav{
	text-align:center;
}

.nav_area ul{
	list-style-type:none;
}

.nav_area ul li{
	display:inline;
	padding-left:2px;
}

.nav_area ul li a{
	display:inline;
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.nav_area ul li a:hover{
	display:inline;
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.footer_area p{
	font:10px/26px Verdana, Geneva, sans-serif;
	color:#000;
}
/* - Styles I have added                                              jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj-~  */


.menutitle {
 font-size: 12px;
 font-family: Arial,Lucida Sans,Verdana,Tahoma;
  color: white;
 
   font-weight: bold;
    text-align: center; 
 }   
               
 .boxWhite { border: 1px solid #0066ff; 
 padding-left: 5px; 
 padding-right: 5px;  
 padding-top: 2px;
  padding-bottom: 3px;
  background-color: white;
  text-align: center;
   }             
               
.newbox { font-family: Arial;
 font-weight: normal;
  width:345px;
  padding: 6px;
   } 
  
 .newbox h2 { background-color:#0066ff;
  text-align:center;
  color:white; 
  margin:0px;
  font-size:12px;
  line-height: 28px; 
  }
     
.newbox ul { overflow:hidden; 
list-style-type:none;
 border: 1px solid #0066CC; margin:0px;
  padding:6px; font-size: 10px;
  }
  
.newbox li { width: 50%; float:left;
}

.newbox li a {
 color: #1C4FFF;
  font-weight:600;
  text-decoration:none;
   }
                  
.newbox2 {
  font-family: Arial;
  font-weight: normal;
   font-size:12px;
    border: 1px solid #0066CC;
   margin-bottom: 10px;
      } 
      
.newbox2 h2 {
 padding: 0px 10px;
  background-color:#0066CC; 
  text-align:left;
   color:white;
    margin:0px;
      font-size:12px;
      line-height: 28px;
  }
  
.newbox2 p {
 margin-bottom: 1px;
  padding: 10px 10px;
   }
   
 .newbox2 img {float: left; margin: 6px;
 }

 .browntitle    {
  background-color: #8f4b0e;   
  border: 1px solid #8f4b0e;
   padding-left: 4px;
   padding-right: 4px; 
   padding-top: 4px;
    padding-bottom: 2px; 
    text-align: center; }  
       
               
.brownbox         { border: 1px solid #8f4b0e; 
padding-left: 4px; 
padding-right: 4px; 
 padding-top: 5px;
 padding-bottom: 3px;
 background-color: #eae3e1; 
 line-height:13px;
/*list-style:inside url(images/bullet_ball_blue.gif);*/
list-style-type:none;
background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
 }
               
.xcenter {text-align: center;
}             

.Bfont12 {
font-size:12px;font-weight:600;
 font-family:verdana, arial, helvetica, sans-serif;
 }
 
.font12      {
 font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10pt;
  }
 .redbold      { font-family: Verdana; font-size: 12px;
 color: #FF0000; 
  font-weight: bold 
  }
  .greenbold      { font-family: Verdana; font-size: 12px;
 color: #008048; 
  font-weight: bold 
  }    
  

.BigRed      { font-family: Verdana; font-size: 18pt;
 color: #FF0000; font-style: italic; 
  font-weight: bold 
  }  
        
 .PerSqtable {     
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	width: 400px;
	table-layout: fixed;
	border-collapse: collapse;	
	margin-left:auto; 
      margin-right:auto;
	}
	
.PerSqtable tr.bottom
	{Border: 1px solid #CCC;
         padding: 0 0 4px;
          font-family: Arial; font-size: 10pt;
}

.PerSqtable td.bottom{
Border: 1px solid #CCC;
width: 512px;
padding: 4px;
}

.PerSqtable th {
	padding: 0 0 3px;
	text-align: left;
	}

.PerSqtable tr.yellow td {
	border-top: 1px solid #FB314D;
	border-bottom: 1px solid #FB314D;
	background: #FFC;
	}
	
.PerSqtable tr.yellow td:nth-child(1){
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #FB314D;
	text-align: center;
}

 .PerSqtable tr.yellow td:nth-child(6){
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FB314D;
}

.PerSqtable td.adjacent {
	border-left: 1px solid #CCC;
	text-align: center;
	}
	
	.PerSqtable td.right{
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	text-align: center;
    }
	
.PerSqtable td{      
	border-bottom: 1px solid #CCC;
	padding: 0 0 2px;
	width: 120px;
	}

.PerSqtable td.width {
border-left: 1px solid #CCC;
padding-left: 3px;
width: 77px;	
	}
    	
.PerSqtable td.col1{
width: 170px;
text-align: left;
border-left: 1px solid #CCC;
padding-left: 4px;
}

.PerSqtable td.col2{
width: 78px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col3{
width: 64px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col4{
width: 64px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col5{
width: 66px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col6{
width: 68px;
text-align: center;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
}
          
.PerSqtable a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.PerSqtable a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

          
.PerSqtable a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.PerSqtable a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}  
 #horzList ul{
float:left;
width:100%;
padding:3px;
margin:0;
list-style-type:none;
}

 #horzList a {
float:left;
width:90px;
height: 16px;
padding:4px;
padding-top: 8px;
text-decoration:none;
font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;  
	color:#1C4FFF;
	text-align: center;
background-color:  #FFC;
border-left: solid 1px #CCC;
border-top: solid 1px red;
border-bottom: solid 1px red;

}
#horzList li:last-child a {
border-right: solid 1px red;
 }

#horzList li:first-child a {
border-left: solid 1px red;
 }

 #horzList a:hover {background-color: white;
color:#F00; }

 #horzList li {display:inline;}              
  
.red{color:red;}

.section_area .middlepanel Calculatorhowto{
	width:480px;
	padding-top:10px;
	text-align:center;
}

/*practise     sdfsdgdgdgdfgdgdgdgfdfgdfgdfgdfgdgfdgfdgdgfdfg                                */

  .section_area .rightpanel .tallskscraper{
	width:190px;
	padding-top:15px;
    padding-right: 80px;
	border:0;
	text-align:center;
	}   
	
.section_area .rightpanel .menu{
	width:180px;
	margin-top:15px;	
	margin-left:0px;
	margin-bottom:15px;
	border-style:solid;    
}

.section_area .rightpanel .menu h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}

.section_area .rightpanel .menu ul{
	list-style-type:none;
	padding:4px 8px;
}

.section_area .rightpanel .menu li{
	line-height:13px;
}

.section_area .rightpanel .menu li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .rightpanel .menu li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel .wideimage{
	width:420px;
	padding-top:10px;
	margin-left: 20px;
	text-align:center;
}
	
.header_area .header_box3 p.red {color:red;
}

.easy img{
margin-top: 130px;
} 
  
.myfoot {
 font:12px Verdana, Geneva, sans-serif;
    font-weight: 600;  
  text-align:center;
 }

.myfoot a{
font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
    text-align:center;
 }
 
 .myfoot a:hover{font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
 
 .section_area .middlepanel .ad{
	width:300px;
	padding-top:5px;
}
.section_area .middlepanel .bigimage{
	width:420px;
	padding-top:5px;
    text-align:center;
}

.font11 {font-size:11px;font-weight:500;font-family:verdana, arial, helvetica, sans-serif; color: #000000}

table.NailTable {
	font-family: verdana,arial,sans-serif;
	width: 460px;
	font-size:11px;
	color:#333333;/*black*/
	border-width: 1px;
	border-color: #666666;/*dark gray */
	border-collapse: collapse;
	margin: auto;
}
table.NailTable th {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #0066ff; /*blue */
	background-color: #f0f0f0;/*light gray */
}
table.NailTable td {
    height: 20px;
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666; /*dark gray */
	background-color: #ffffff;/*white */
}
table.NailTable .leftcol th{
width: 240px;
text-align: center;
}

.Specialh1{ color:#281b2b;
	font:24px/22px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
	}
    .BfontWhite12 { font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: 
               #FFFFFF; font-weight: bold; text-align:center; }table.NailTable {
	font-family: verdana,arial,sans-serif;
	width: 420px;
	font-size:11px;
	color:#333333;/*black*/
	border-width: 1px;
	border-color: #666666;/*dark gray */
	border-collapse: collapse;
	margin: auto;
}

table.NailTable th {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #0066ff; /*blue */
	background-color: #0066ff;/*blue */
	font-size: 12px;
	font-family: verdana, arial, helvetica, sans-serif;        
    font-weight: bold;
}

table.NailTable td {
    height: 20px;
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666; /*dark gray */
	background-color: #ffffff;/*white */
}

table.NailTable .leftcol th{
width: 240px;
text-align: center;
}

table.NailTable h1 { color:#000099;
	font:24px/22px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
	}
	
table.NailTable h2 { font-size: 20px;
 font-weight: bold;
  text-align: center;
   }	
	
table.NailTable h3 { font-size: 16px;
 font-weight: bold;
  text-align: center;
   }
  
table.NailTable h4 { font-size: 11px;
 font-weight: bold;
  text-align: center;
   }
  
.Specialh4 { font-size: 11px;
 font-weight: bold;
  text-align: center;
   }  
  
 .bodywidth{
 width: 786px; 
 margin:0px auto;
  }
   
 .rightColumn{ 
 width: 130px; 
 float: left;
 margin-left:10px;
  	}
	
	.leftcolumn{
	width: 181px;
	float: left;
	margin-right:10px;	
	 }
	 
	 .centercolumn{
	 width: 428px;
	 float: left;
	 margin:0px auto;
	  }
	  
	.Bfont22{
	 font-size: 22px; font-family: verdana, arial, helvetica, sans-serif; 
               font-weight: bold;
			   color: #FFFFFF;
			   text-align: center;
	 } 
	  

.leftcol th{
width: 120px;
text-align: center;
} 
 .rightcol th{
width: 140px;
text-align: center;
} 


.bluegraybox ul{
	padding:14px 0;	
}

.bluegraybox li{
	line-height:13px;	
	border: 1px solid #0066ff;
	list-style-type:none;
	background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
	background-color: #e9e9e9
}
a {	color: #0000ff;	font-size:10px;text-decoration:none;font-weight:600;font-family:verdana, arial, helvetica, sans-serif;}
a:link       { color: #1C4FFF }
a:visited {color:#07a;}
a:hover {background-color:#eee;}
a:hover {color: red;}

.Bfont22{
	 font-size: 22px; font-family: verdana, arial, helvetica, sans-serif; 
               font-weight: bold;
			   color: #FFFFFF;
			   text-align: center;
	 } 
     
     .largeRectangle{
	width:336px;
	padding-top:10px;
	text-align:center;
}

.boxtitle    { background-color: #0066ff;
 color: #FFFFFF;
 font-size: 12px;
  font-weight: bold;
  font-family: Arial,Lucida Sans,Verdana,Tahoma;      
   border: 1px solid #0066CC; 
   padding-left: 2px;
  padding-right: 2px;
  padding-top: 5px;
   padding-bottom: 1px;
    text-align: center;
 }               
               
               
.box { border: 1px solid #0066ff;
font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
 padding-left: 5px;
  padding-right: 5px;   
  padding-top: 5px; 
  padding-bottom: 3px;
  background-color: #e9e9e9;
   width: 183px;
    }
    
    .box li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
	margin:0 18px;
}

.box li a{
	font:10px Verdana, Geneva, sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none;
	color:#1C4FFF;
	margin:0 18px;	
}

.box li{
	line-height:13px;
	/*list-style:inside url(images/bullet_ball_blue.gif);*/
	list-style-type:none;
	background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
	}
    
	
.box ul{
	padding:14px 0;	
}

.box p a{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.box p a:hover{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .rightpanel .talladd{ /*added 05-19-13--*/
	width:120px;
	padding-top:15px;
    padding-right:80px;
}
 .section_area .middlepanel .roofpitchbox  
{
	width:220px;
	margin-top:35px;
	border:1px solid #0066ff;
	background-color: #F2F2F2;
}

.section_area .middlepanel .roofpitchbox a{
	font:10px Verdana, Geneva, sans-serif;
    padding-left: 8px;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .middlepanel .roofpitchbox a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel .roofpitchbox h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}

.section_area .middlepanel .roofpitchbox ul{
	list-style-type:none;
	padding:4px 8px;
text-align:left;
}

.section_area .middlepanel .roofpitchbox li{
	line-height:13px;
}

.section_area .middlepanel .roofpitchbox li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .middlepanel .roofpitchbox li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel .LargeRectangle{
width: 336px;
text-align:center;
 }	
 
 .section_area .middlepanel .speciallist ul{
	list-style-type:none;
	padding:4px 8px;
}

.section_area .middlepanel .speciallist li{
font:13px/18px Verdana, Geneva, sans-serif;
	color: #000;
	line-height:15px;
    padding-left: 25px;
    list-style-type:none;
background:url(images/bullet_ball_blue.gif) no-repeat left 2px;	
}
.section_area .middlepanel .lipbender{
width: 295px;
padding-left: 25px;
padding-top: 25px;
text-align: center;
 }
 
 .section_area .middlepanel .bend_1inch{ 
 width: 178px; 
 }
 
 .section_area .middlepanel .bend_45{ 
 width: 243px; 
 }
 
 .section_area .middlepanel .finished_bend{ 
 width: 164px; 
 }
 
 .section_area .middlepanel .paypal_button{ 
 width: 148px; 
 text-align:center;
 }
 
 .section_area .middlepanel .buy_non_usa{ 
 width: 143px; 
 text-align:center;
 }
 
 .section_area .middlepanel .paypal_logo{ 
 width: 100px; 
 text-align:center;
 }
 .section_area .middlepanel figcaption{ 
font:13px/18px Verdana, Geneva, sans-serif;
	color: #000;
    }
        
    .section_area .middlepanel img{
    padding-right: 10px;
    padding-left: 6px;
     }
 /*last 2 sections removed */       
      .section_area .middlepanel{  
     font:12px/18px Verdana, Geneva, sans-serif;
	color: #000;
	padding-top:18px;
    }
     .section_area .middlepanel hr{ 
    background: #666;   
    border: 0;
    height: 1px;
    width: 90%;
    color: #666
     }	
     			
    .section_area .middlepanel .paddedinline {
    display:inline;
    padding-right: 6px;
    padding-left: 6px;
     }
     
     .section_area .middlepanel a{
font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
color:#1C4FFF;
}

.section_area .middlepanel a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
	margin:0;
}

.Bodywrap{
	width: 965px;
	margin: 0 auto;  
}	
.thispage hr{
	margin-top: 80px;
	width= 100%
}
#menubox {
	width: auto ;
	margin:0 auto;
	display:table;
} 	
/*border-top: solid 1px red;
border-bottom: solid 1px red;*/
.menu_table_nav ul li{
	list-style:none;
	float: left;
	min-width:88px;
	height:16px;
	padding: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;  
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border-top: solid 1px #0066ff;	
	border-bottom:1px solid #0066ff;
	border-left:1px solid #0066ff;
	display:inline;
}

.menu_table_nav ul li:last-child{
	border-right:1px solid #0066ff;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:isnoend2001
ID: 39258460
Thanks padas, i pasted your code, but it made no difference

Thanks : jagadishdulal, but it didn't work.the code in the css file cannot be changed as other pages are using it
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 39258466
The code works fine  http://jsbin.com/oxuroj/2 and I fixed up a few things too.  I don't know what is in your style sheet. I am only working with the css in your style tags. You probably have something conflicting.  To fix:

Move this line

<link href="../roof.css" rel="stylesheet" type="text/css">

ABOVE the </style></style> tags

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roofcalcwriter 10 screenshot</title>
<meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
<meta name="description"  content="RoofCalcWriter estimate screenshot">
<meta name="keywords" content="Roofing">

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link href="../roof.css" rel="stylesheet" type="text/css">
<style type= "text/css">
#menubox {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
nav.menu_table_nav { text-align: center; }

.menu_table_nav #horzlist a
{
	width:88px;
	height: 16px;
	padding:4px;
	padding-top: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border: 1px solid #0066ff;
}
#horzlist li { display:inline; }
/*div#horzlist li:first-child {
border-left:none; }*/

 #horzlist a:hover
{
	background-color: white;
	color:#F00;
}
.Bodywrap
{
	width: 965px;
	margin: 0 auto;
}
.thispage hr { margin-top: 80px;  width= 100%
}
</style>

<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Bodywrap">
  <div style="float:Left"> <img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/> </div>
  <!--float-->
  <div style ="text-align:center"> 
    <script type="text/javascript"><!--

google_ad_client = "ca-pub-5860242097775343";

/* leaderboard728x90 */

google_ad_slot = "8943766566";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script> 
    <script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 
  </div>
  <!--aligncenter-->
  <div style="clear: both;"></div>
  <div style="margin-top:15px"></div>
  <div id="menubox">
    <nav class="menu_table_nav">
      <ul id="horzlist">
        <li><a href="http://roofgenius.com">Home</a></li>
        <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
        <li><a href="http://roofgenius.com/about.htm">About</a></li>
        <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
        <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
      </ul>
    </nav>
    <!--nav--> 
  </div>
  <!--menubox-->
  
  <div class="thispage">
    <hr>
  </div>
  <!--thispage--> 
</div>
<!--bodywrap-->
</body>
</html>

Open in new window


Then I would suggest figuring out what is overlapping and removing/merging to clean things up.
0
 

Author Closing Comment

by:isnoend2001
ID: 39258507
Thanks
I removed the link to the style sheet and it works
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question