1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

HTML Content div table padding is messed up

Discussion in 'Web Development' started by fididdly, Oct 10, 2011.

  1. fididdly

    fididdly New Member

    Hi--
    When I apply this template to pages, the main table in the content area (530 px table in a 580 px content area) gets distorted, so that instead of staying centered with 10 pt. padding at left and right, there's, like, 30 pt. or more padding at right and 10 pt. at left. The alignment of the graphic gets screwed up too depending on the text before and/or after it. Can someone tell me how to fix it? Here's the code from beginning to the top of the right-hand sidebar:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/PageTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>FG2Q</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <style type="text/css">
    <!--
    body {
    margin: 0;
    padding: 0;
    color: #000;
    border-top-color: #FFF;
    border-right-color: #FFF;
    padding-bottom: 10px;
    padding-right: 10px;
    font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
    background-color: #99C;
    }
    ul, ol, dl {
    padding: 0;
    margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    font-weight: normal;
    font-size: 42px;
    }
    a img {
    border: none;
    }

    a:link {
    color: #000;
    text-decoration: none;
    padding-right: 0px;
    }
    a:visited {
    color: #000;
    text-decoration: none;
    }
    a:hover, a:active, a:focus {
    text-decoration: underline;
    background: #99C;
    padding-right: 0px;
    }
    .container {
    width: 800px;
    background: #FFFFFF;
    margin: 0 auto;
    border-top-color: #99C;
    border-bottom-color: #99C;
    }
    .header {
    background: #ADB96E;
    }
    .sidebar1 {
    float: left;
    width: 20px;
    background: #FFF;
    padding-bottom: 0px;
    border-top-color: none;
    border-top-style: none;
    border-top: none;
    border-color: #FFF;
    padding-right: 10px;
    }
    .content {
    padding: 10px 50;
    width: 580px;
    float: left;
    border-right-style: solid;
    border-color: #99C;
    border-top-color: #99C;
    }
    .sidebar2 {
    float: right;
    width: 178px;
    background: #FFF;
    padding: 0;
    }
    .content ul, .content ol {
    padding: 0 15px 15px 50px;
    }
    ul.nav {
    list-style: none;
    margin-bottom: 15px;
    padding-right: 5px;
    font-size: 12px;
    }
    ul.nav li {
    border-bottom: 1px solid #FFF;
    padding-right: 10px;
    }
    ul.nav a, ul.nav a:visited {
    padding: 5px 5px 5px 15px;
    display: block;
    width: 160px;
    text-decoration: none;
    background: #99C;
    padding-right: 0px;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background: #FFF;
    color: #000;
    padding-right: 0px;
    font-size: 12px;
    }
    .footer {
    padding: 0;
    background: FFF;
    position: relative;
    border-top-color: #99C;
    border-top-style: solid;
    border-width: thin;
    }

    fltrt {
    float: right;
    margin-left: 8px;
    }
    .fltlft {
    float: left;
    margin-right: 8px;
    }
    .clearfloat {
    clear:both;
    height:0;
    font-size: 0px;
    line-height: 0px;
    }
    .footertext {
    font-size: 11px;
    font-style: italic;
    }
    .PageSubtitle .container .header {
    font-family: Cochin;
    }
    -->
    </style>

    <link href="file:///Macintosh HD/Users/Sue/Documents/Field Guide/Templates/TemplateStyle.css" rel="stylesheet" type="text/css" />
    </head>

    <body class="PageSubtitle">

    <div class="container">
    <div class="header"></div> <hr />
    <div class="sidebar1">
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>
    <!-- InstanceBeginEditable name="EditRegion3" -->
    <link href="../../../Templates/TemplateStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .Nameref {
    font-family: "Century Gothic";
    font-size: 12px;
    font-style: normal;
    line-height: 1px;
    font-variant: normal;
    text-align: right;
    bottom: 10px;
    }
    </style>
    <style type="text/css">
    <!--
    body {
    margin: 0;
    padding: 0;
    color: #000;
    border-top-color: #FFF;
    border-right-color: #FFF;
    padding-bottom: 10px;
    padding-right: 10px;
    font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
    background-color: #99C;
    }
    ul, ol, dl {
    padding: 0;
    margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    font-weight: normal;
    font-size: 42px;
    }
    a img {
    border: none;
    }
    a:link {
    color: #000;
    text-decoration: none;
    padding-right: 0px;
    }
    a:visited {
    color: #000;
    text-decoration: none;
    }
    a:hover, a:active, a:focus {
    text-decoration: underline;
    background: #99C;
    padding-right: 0px;
    }
    .container {
    width: 800px;
    background: #FFFFFF;
    margin: 0 auto;
    border-top-color: #99C;
    border-bottom-color: #99C;
    }
    .header {
    background: #ADB96E;
    }

    .sidebar1 {
    float: left;
    width: 20px;
    background: #FFF;
    padding-bottom: 0px;
    border-top-color: none;
    border-top-style: none;
    border-top: none;
    border-color: #FFF;
    padding-right: 10px;
    }
    .content {
    padding: 10px 50;
    width: 580px;
    float: left;
    border-right-style: solid;
    border-color: #99C;
    border-top-color: #99C;
    }
    .sidebar2 {
    float: right;
    width: 178px;
    background: #FFF;
    padding: 0;
    }
    .content ul, .content ol {
    padding: 0 15px 15px 50px;
    }
    ul.nav {
    list-style: none;
    margin-bottom: 15px;
    padding-right: 5px;
    font-size: 12px;
    }
    ul.nav li {
    border-bottom: 1px solid #FFF;
    padding-right: 10px;
    }
    ul.nav a, ul.nav a:visited {
    padding: 5px 5px 5px 15px;
    display: block;
    width: 160px;
    text-decoration: none;
    background: #99C;
    padding-right: 0px;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background: #FFF;
    color: #000;
    padding-right: 0px;
    font-size: 12px;
    }
    .footer {
    padding: 0;
    background: FFF;
    position: relative;
    clear: both;
    border-top-color: #99C;
    border-top-style: solid;
    border-width: thin;
    }
    .fltrt {
    float: right;
    margin-left: 8px;
    }
    .fltlft {
    float: left;
    margin-right: 8px;
    }
    .clearfloat {
    clear:both;
    height:0;
    font-size: 0px;
    line-height: 0px;
    }
    .footertext {
    font-size: 11px;
    font-style: italic;
    }
    .PageSubtitle .container .header {
    font-family: Cochin;
    }
    -->
    </style>
    <link href="file:///Macintosh HD/Users/Sue/Documents/Field Guide/Templates/TemplateStyle.css" rel="stylesheet" type="text/css" />
    <div class="container">
    <div class="header"></div> <hr />
    <div class="sidebar1">
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>
    <div class="content">
    <table border="0" cellpadding="0" cellspacing="0" table="table">
    <tr>
    <td width="130" rowspan="2"><a href="../../0Violet/StartHere.html"><img src="../../0Violet/StartHereimages/SquareIconViolet.jpg" width="130" height="130" /></a></td>
    <td width="398"><h1>Square</h1></td>
    </tr>
    <tr>
    <td class="PageSubtitle">Click on the icon that's the most like your mystery block. </td>
    </tr>
    </table>
    <hr />
    <table width="530" border="1" align="left" cellpadding="10" cellspacing="10">
    <tr>
    <td><a href="../../Green/1.0Square/1ACtrSq/1ACenterSquare.html"><img src="SquareinSquareBlue.jpg" alt="Center Square" width="130" height="130" /></a><br />
    <span class="Linklabel">Center Square</span><br /></td>
    <td><a href="../../Green/1.0Square/1BOffSq/1BOffsetSquare.html"><img src="OffsetSquareIconBlue.jpg" alt="Offset Square" width="130" height="130" /></a><br />
    <span class="Linklabel">Offset Square</span><br /></td>
    <td><a href="../../Green/1.0Square/1CSqOnPt/1CSquareonPoint.html"><img src="SqonPtIconBlue.jpg" alt="Square on Point" width="130" height="130" align="top" /></a><br />
    <span class="Linklabel">Square on Point</span><br /></td>
    </tr>
    <tr>
    <td class="Linklabel"><p><a href="../../Green/1.0Square/1DChkbd/1Dcheckerboard.html"><img src="Checkerboard3x3Blue.jpg" alt="Nine-patch" width="130" height="130" /></a><br />
    <span class="Linklabel">Checkerboard</span></p>
    <table border="0" align="right" cellpadding="0" cellspacing="0">
    <tr>
    <td align="right" valign="bottom"><span class="Nameref">This is it! <img src="../../../ButtonStar.jpg" width="20" height="19" alt="This is it!" /></span></td>
    </tr>
    </table>
    <p class="Linklabel">&nbsp;</p></td>
    <td><p><a href="../../Green/1.0Square/1ESqDiag/1ESquaresDiagonal.html"><img src="SgleIrishChainIconBlue.jpg" alt="Single Irish Chain" width="130" height="130" align="top" /></a><br />
    <span class="Linklabel">l Lines<span class="Nameref">
    <br /></span></span></p>
    <table border="0" align="right" cellpadding="0" cellspacing="0">
    <tr>
    <td align="right" valign="bottom"><span class="Linklabel">This is it!</span><span class="Nameref"> <img src="../../../ButtonStar.jpg" width="20" height="19" alt="This is it!" /></span></td>
    </tr>
    </table>
    <p class="Linklabel"></p></td>
    <td><p><img src="ConcSqIconBlue.jpg" alt="Concentric Squares" width="130" height="130" align="top" /><br />
    <span class="Linklabel">Concentric</span><span class="Linklabel"><br />
    <br />
    </span></p></td>
    </tr>
    <tr>
    <td>&nbsp;<br />
    <br /></td>
    <td>&nbsp;<br />
    <br /></td>
    <td><br />
    <br /></td>
    </tr>
    </table>
    <br />
    <!-- end .content --></div>
    <div class="sidebar2"> /*etc.*/
     
    fididdly, Oct 10, 2011
    #1