Webmaster Forum / HTML, CSS, Scripts / CSS / June 2008

Hi, all

I am change my webpage to using div and css for my layout, it was
using table before and I want to get rid of it.
Basically it draws a box around my content using background pictures,
but I can not get the left-border and right-border of the box working
using div. Anybody can help me?

Thanks in advance
-rockdale

here is my layout using table:

<table  cellspacing="0" cellpadding="0" width="100%" align="center"
border="0" style="height: 100%">
             <tbody>
             <tr>
               <td class="top_left"></td>
               <td class="top_mid"></td>
               <td class="top_right"></td>
             </td>
             </tr>
             <tr>
               <td class="center_left"></td>
               <td align="left" bgcolor="#ffffff" valign="top">
        CONTENT GOES HERE
       </td>
       <td class="center_right"></td>
       </tr>
       <tr>
       <td class="bottom_left"></td>
       <td class="bottom_mid"></td>
       <td class="bottom_right"></td>
        </tr>
       </tbody>
      </table>

and my css

td.top_left
{
    background-image: url("images/top_lef_16_32.gif");
    background-repeat:no-repeat;
    vertical-align: bottom;
    height:32px;
    width: 16px;
    margin-bottom:0px;

}
td.top_right
{
    background-image: url("images/top_rig_24_32.gif");
    background-repeat:no-repeat;
    vertical-align: bottom;
    height:32px;
    width: 24px;
    margin-bottom:0px;

}

td.top_mid
{
    background-image: url("images/top_mid_16_32.gif");
    background-repeat: repeat-x;
    vertical-align: bottom;
    margin-bottom:0px;
    height:32px;

}

td.center_left
{
    background-image: url("images/cen_lef.gif");
    width: 16px;
}
td.center_right
{
    background-image: url("images/cen_rig.gif");
    width: 24px;
}

td.bottom_left
{
    background-image: url("images/bot_lef.gif");
    background-repeat:no-repeat;
    height: 16px;
    width: 16px;
}

td.bottom_mid
{
    background-image: url("images/bot_mid.gif");
    height:16px;
    background-repeat: repeat-x;
}

td.bottom_right
{
    background-image: url("images/bot_rig.gif");
    background-repeat:no-repeat;
    height: 16px;
    width: 24px;
}

-------------------
my div
<div>
<div class="tabTopLeftCorner"></div><div class="tabTopBorder"></
div><div class="tabTopRightCorner"></div>
<div class="clear"></div>
<div class="tabLeftBorder"></div>
<div>
CONTENT GOES HERE

</div>
<div class="tabrightborder"></div>
<div class="clear"></div>
<div class="tabBottomLeftCorner"></div>
<div class="tabBottomBorder"></div><div class="tabBottomRightCorner"></
div>
<div class="clear"></div>
</div>
</div>

css for my div

    .tabTopBorder
        {
            background-image: url("images/top_mid_16_16.png");
            background-repeat: repeat-x;
            border: solid 1px red;
            height:16px;
            width: 858px;

        }

        .tabBottomBorder
        {
            background-image: url("images/bot_mid.gif");
            background-repeat: repeat-x;
            border: solid 1px red;
            height: 16px;
            width: 858px;
        }
        .tabLeftBorder
        {
            background-image: url("images/cen_lef.gif");
            background-repeat: repeat-y;
            width:16px;
            float:left;
            border: solid 1px red;
            height: 100%;

        }

        .tabRightBorder
        {
            background-image: url("images/cen_rig.gif");
            background-repeat: repeat-y;
            width:24px;
            float:right;
            border: solid 1px red;

        }

        .tabTopLeftCorner
        {
            background-image: url("images/top_lef.gif");
            background-repeat: no-repeat;
            width:16px;
            height:32px;
            float:left;
        }

        .tabTopRightCorner
        {
            background-image: url("images/top_rig.gif");
            background-repeat: no-repeat;
            width:24px;
            height:32px;
            float:right;
        }

        .tabBottomLeftCorner
        {
            background-image: url("images/bot_lef.gif");
            background-repeat: no-repeat;
            width:16px;
            height:32px;
            float:left;
        }

        .tabBottomRightCorner
        {
            background-image: url("images/bot_rig.gif");
            background-repeat: no-repeat;
            width:24px;
            height:32px;
            float:right;
        }