[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2013-06-18
6
Medium Priority
?
342 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 54

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 54

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 1000 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

649 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