Using tables to draw boxes

[houdini987]

Hi all,

Ok I'm sure this is a very basic html design question here so please go easy on me. But... I've been working on this to the point of pulling out hairs and could use a quick bump in the right direction.

I'm using tables to draw some borders around a main content module (www.greenlawphoto.com). Trouble is, I'm getting that pesky 1 pixel line of separation between my corner image and the vertical background image. If you go to the site you'll see what I mean, by looking at the gray'ish bar to the right of the menu.

I should also note that I'm using tables because that's pretty much the backbone for these DotNetNuke skins -- I'm sure there's an easier way of doing it but I think I'm stuck using tables for the time being.

Thanks in advance! (oh and ignore the color scheme, I'm in the process of changing it so the colors won't make sense)

I put some code below so you can see how this all shakes out...

<td width="200" rowspan="1" align="right" valign="top">
                        <table border="0" cellspacing="5" cellpadding="0">
                            <tr>
                                <td>
                                    [img]<%= SkinPath %>images/blank.gif[/img]</td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU" display="vertical" usearrows="false"
                                        userootbreadcrumbarrow="false" rootmenuitembreadcrumbcssclass="rootmenuitembreadcrumb"
                                        submenuitembreadcrumbcssclass="submenuitembreadcrumb" rootmenuitemcssclass="rootmenuitem"
                                        rootmenuitemselectedcssclass="rootmenuitemselected" submenucssclass="submenu" /></td>
                            </tr>
                            <tr>
                                <td align="center" width="176">
                                    [img]<%= SkinPath %>images/contact.gif[/img]
                                </td>
                            </tr>
                            <tr>
                                <td id="LeftPane" runat="Server">
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="22" align="right" valign="top" background="<%= SkinPath %>images/paneseperatorbg.gif">
                        [img]<%= SkinPath %>images/sepTop.gif[/img]</td>
                    <td width="570" rowspan="2" valign="top" background="<%= SkinPath %>images/panebg.gif">
                        <table width="570" border="0" cellspacing="0" cellpadding="0">

[/code]

[weslinda]

Well, the first issue that you are running into is the fact that you are nesting a lot of tables in this page. Too many tables can cause a lot of fun.

Why so much reliance on code at the page level, and not moving towards CSS for layout?