• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 343
  • Last Modified:

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

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
isnoend2001
Asked:
isnoend2001
  • 3
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Jagadishwor DulalBraces MediaCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
isnoend2001Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
isnoend2001Author Commented:
Thanks
I removed the link to the style sheet and it works
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now