I'm trying to set up my container template so that it has a a 1px clear border all the way around. Padding in the skin.css file does this nicely, except that it widens the main table so that my border images for the page do not line up. If I set padding to 0, everything lines up perfectly. Can anyone help?
Here is the relevant part of the skin .ascx file:
<table cellspacing="0" cellpadding="0" width="647" border="0">
<tr>
<td class="toppane" colspan="5" id="TopPane" runat="server" valign="top" align="center">
</td>
</tr>
<tr valign="top">
<td class="leftpane" id="LeftPane" runat="server" valign="top" align="center">
</td>
<td class="contentpaneleft" id="ContentPane" runat="server" valign="top" align="center">
</td>
<td class="middlepane" id="MiddlePane" runat="server" valign="top" align="center">
</td>
<td class="contentpaneright" id="RightContentPane" runat="server" valign="top" align="center">
</td>
<td class="rightpane" id="RightPane" runat="server" valign="top" align="center">
</td>
</tr>
<tr>
<td class="bottompane" colspan="5" id="BottomPane" runat="server" valign="top" align="center">
</td>
</tr>
</table>
Here is the relevant part of the skin.css file:
.leftpane {
width: 33px;
height: 387px;
background-image: url(images/left_3.jpg);
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
.contentpaneleft {
vertical-align: top;
width: 266px;
background-image: url(images/back_13.jpg);
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
}
.middlepane {
width: 50px;
background-image: url(images/sword.jpg);
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
.contentpaneright {
vertical-align: top;
width: 266px;
background-image: url(images/back_23.jpg);
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
}
.rightpane {
width: 32px;
height: 387px;
background-image: url(images/right_3.jpg);
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
If I change all the padding settings to 0px, everything lines up