PDA

View Full Version : Content table spacing is messed up


Webbedfeat
10-10-2011, 08:37 PM
When I apply the template to a page, it messes up the spacing. The table is supposed to be 530px wide in a 580px wide content box, and the template makes the right padding much larger than the left padding. How do I fix this? Anybody....? Thank you.


<!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.*/

DWcourse
10-13-2011, 05:32 AM
You have left and right sidebars (which are empty) on that page. The right sidebar is set wider than the left sidebar. But the real problem is you need to learn about CSS-based layout and how to design without tables.