SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Spacing Issue

  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing Issue

    I have a page that has a sidebar on the right hand side. The sidebar has a stroke around the brownish colored box and the stroke on the bottom seems to be unevenly spaced when compared to the left, top and right sides. I also was looking to add a bit more space into the bottom of the brownish colored sidebar area, but when I do, the sidebar stroke or border does not expand to the new depth of the sidebar div. Any thoughts on how to solve this issue?


    LINK-
    http://www.clinchrivertitle.com/test/about-us.html


    CSS-
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    html {
    	height: 100%; 
    	margin-bottom: 1px; 
    }
    body {
    	background-color: #837F49;
    }
    #footer {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #ADA783;
    	text-align: right;
    	padding-top: 10px;
    	padding-right: 15px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    }
    #footer a, #footer a:visited {
    	color: #ADA783;
    	text-decoration: none;
    }
    #footer a:hover {
    	color: #333300;
    	text-decoration: underline;
    }
    #body {
    	width: 470px;
    	margin-right: 15px;
    	margin-bottom: 30px;
    	margin-left: 55px;
    }
    #full {
    	width: 670px;
    	margin-right: 15px;
    	margin-bottom: 30px;
    	margin-left: 55px;
    }
    #wrapper #body li {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 20px;
    	color: #515251;
    	list-style-image: url(../i/gfx_bullet.gif);
    }
    #wrapper {
    	padding-top: 35px;
    }
    .sub {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #640D0D;
    	line-height: 20px;
    }
    .sub a, .sub a:visited {
    	color: #640D0D;
    	text-decoration: none;
    }
    .sub a:hover {
    	color: #640D0D;
    	text-decoration: underline;
    }
    .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #515251;
    	line-height: 20px;
    }
    .content a, .content a:visited {
    	color: #515251;
    	text-decoration: none;
    }
    .content a:hover {
    	color: #49301E;
    	text-decoration: underline;
    }
    #sidebar {
    	border: 1px solid #CDCCCB;
    	float: right;
    	width: 217px;
    	margin-right: 15px;
    	margin-bottom: 30px;
    }
    #sidebar2 {
    	float: right;
    	width: 217px;
    	margin-right: 15px;
    	margin-bottom: 30px;
    }
    #location {
    	background-color: #D0C8BB;
    	width: 200px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #49301E;
    	line-height: 20px;
    	font-weight: bold;
    	padding-top: 28px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 10px;
    	margin: 4px;
    }
    #map {
    	float: right;
    	width: 250px;
    	padding: 15px 15px 0 15px;
    	margin: 0;
    }
    #address {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	line-height: 20px;
    	padding-left: 15px;
    }
    #address a, #address a:visited {
    	color: #666666;
    	text-decoration: none;
    }
    #address a:hover {
    	color: #666666;
    	text-decoration: underline;
    }
    .bold {
    	font-weight: bold;
    }
    #masthead {
    	background-color: #E7E4D9;
    	height: 46px;
    	float: left;
    }
    #topright {
    	position: relative;
    	float: right;
    	top: 0px;
    }
    h1 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 18px;
    	font-weight: bold;
    	color: #640D0D;
    }
    ul a {
    	color: #49301E;
    }
    #wrapper #body .content img {
    	padding-left: 10px;
    	padding-bottom: 10px;
    }
    #wrapper #sidebar #sidebar2 ul {
    	list-style-image: url(../i/gfx_bullet_sidebar.gif);
    }

    HTML-
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Professional Closing and Title Services Clinton Tennessee | Clinch River Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
    <link href="c/styles.css" rel="stylesheet" type="text/css" media="screen" >
    <script language="JavaScript" src="js/global.js" type="text/javascript"></script>
    </head>
    <body bgcolor="#837F49" onLoad="MM_preloadImages('i/btn_home_over.gif','i/btn_aboutUs_over.gif','i/btn_services_over.gif','i/btn_faqs_over.gif','i/btn_testimonials_over.gif','i/btn_contact_over.gif')">
    <div id="wrapper">
    <table border="0" align="center" cellpadding="0" cellspacing="0">
        <tr valign="top" bgcolor="#E7E4D9">
    		<td height="46"><img src="i/gfx_tl.gif" width="6" height="46" alt=""><a href="http://www.clinchrivertitle.com"><img src="i/gfx_logo.gif" width="347" height="46" border="0" alt="Clinch River Title" title="Clinch River Title"></a></td>
    	    <td height="46" align="right" valign="middle">&nbsp;</td>
          <td height="46"><img src="i/gfx_tr.gif" alt="" width="9" height="46" align="right"></td>
        </tr>
    	<tr valign="top">
    	  <td height="32" colspan="3">
    	  <img src="i/gfx_nav_bkg.gif" width="185" height="32" alt=""><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_home','','i/btn_home_over.gif',1)"><img src="i/btn_home.gif" alt="Home" title="Home" name="btn_home" width="74" height="32" border="0"></a><a href="about-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_aboutUs','','i/btn_aboutUs_over.gif',1)"><img src="i/btn_aboutUs_over.gif" alt="About Us" title="About Us" name="btn_aboutUs" width="97" height="32" border="0"></a><a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_services','','i/btn_services_over.gif',1)"><img src="i/btn_services.gif" alt="Services" title="Services" name="btn_services" width="89" height="32" border="0"></a><a href="title-order-form.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_order','','i/btn_order_over.gif',1)"><img src="i/btn_order.gif" alt="Title Order Form" title="Title Order Form" name="btn_order" width="145" height="32" border="0"></a><a href="resources.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_resources','','i/btn_resources_over.gif',1)"><img src="i/btn_resources.gif" alt="Resources" title="Resources" name="btn_resources" width="100" height="32" border="0"></a><a href="contact.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_contact','','i/btn_contact_over.gif',1)"><img src="i/btn_contact.gif" alt="Contact" title="Contact" name="btn_contact" width="90" height="32" border="0"></a></td>
    	</tr>
    	<tr>
    		<td colspan="11" valign="top"><table width="780" border="0" cellpadding="0" cellspacing="0" style="background-image: url(i/gfx_body_bkg.gif)">
              <tr>
                <td>
                <p>&nbsp;</p>
                <div id="sidebar"><div id="location">
                  <img src="i/gfx_bullet_sidebar.gif" alt="" width="11" height="11"> Clinton Office
                  <div id="address">
                    <p>210 Charles Seivers Blvd. <br>
                      Suite 201, Clinton, TN 37716<br>
                      <span class="bold">PHONE:</span> (865) 457-4226 <br>
                      <span class="bold">TOLL FREE:</span> (866) 310-3366<br>
                      <span class="bold">FAX:</span> (865) 457-3162 <br>
                      <span class="bold">E-MAIL:</span> <a href="#">email</a><br><a href="#">email</a></p>
                    <p><a href="contact.php">VIEW CLINCH RIVER TITLE MAP</a></p>
                  </div>
                </div>
                </div>
                <div id="body">
                  <h1>About Us</h1>
                  <p class="content"><img src="i/gfx_inset_about.jpg" alt="" width="200" height="134" align="right">We provide complete closing services, including Title and Escrow services, Title Opinions, Deed Preparation, Purchase Agreements, Land Contracts and Notes. Title Insurance is provided through Southern Title Insurance Corporation, a trusted name in the Title Insurance industry, with offices in 20 states and Washington D.C. Our expert staff have the experience to anticipate and resolve settlement issues prior to closing so that your transaction is accurate and hassle-free everytime. </p>
                  <p class="content">Feel free to <a href="contact.php">contact us</a> today with questions regarding the transfer of property, real estate contracts, title insurance, or simply to find out more about how we can make your real estate transaction a carefree event.</p>
                  </div>            </td>
              </tr>
            </table></td>
    	</tr>
    	<tr>
    		<td height="12" colspan="11" valign="top">
    			<img src="i/gfx_footer.gif" width="780" height="12" alt=""></td>
    	</tr>
    	<tr>
    	  <td height="12" colspan="11" valign="top"><div id="footer">|  <a href="http://www.clinchrivertitle.com/">home</a>  |  <a href="http://www.clinchrivertitle.com/about-us.html">about us</a>  |  <a href="http://www.clinchrivertitle.com/services.html">services</a>  |  <a href="http://www.clinchrivertitle.com/title-order-form.php">title order form</a> | <a href="http://www.clinchrivertitle.com/title-search.html">title search</a> | <a href="http://www.clinchrivertitle.com/price-list.html">price list</a> | <a href="http://www.clinchrivertitle.com/resources.html">resources</a>  |  <a href="http://www.clinchrivertitle.com/contact.php">contact</a>  |<br>
          &copy; Copyright 2008. All rights reserved by Clinch River Title. <a href="http://www.t2graphicdesign.com/" target="_blank">Website design by T2 Design</a>.</div></td>
      </tr>
    </table>
    </div>
    </body>
    </html>
    Todd Temple > T2 Design

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The browsers have a default margin on paragraphs that is causing the differences.
    Test to reset p-margins in that box.

    Edit) Also test to remove the width on #sidebar.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. That did it on my machine (using Mac/Firefox). You are a genius!

    I want to thank you again... you have helped me out in the past on another previous web project. I appreciate your advice and willingness to share! Best wishes.
    Todd Temple > T2 Design

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad that it helped.
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •