Table Background Image vanished~

[KadajXII]

Dear Pros,

Attached hereby is my error screen-shots, as you can see, before I refresh my page the layout is nice (see attachment beforeReload.jpg), but after I reloaded my page, the layout will have massive problems (see attachment afterReload.jpg), and if I keep reload the page, sometimes it will give me back my proper layout ((see attachment beforeReload.jpg). So Can you tell me what I did to make my page so naughty? or shud i use another way to do the same layout? I tried div but no luck, now I am using table, Here is the code. Sorry my css is messy.

HTML Code

<div class="upperLeft"></div><div class="nt_op"></div><div class="upperRight"></div>
  <table id="nContainer" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="l_eft"></td>
    <td class="nboxContent">
      <center><h2>PEACE!!</h2></center>
    </td>
    <td class="r_ight"></td>
    <td></td>
    </tr>
    </table>
    <div class="lowerLeft"></div><div class="nbottom"></div><div class="lowerRight">   </div>

CSS

.upperLeft, .nt_op, .upperRight, .l_eft, .nboxContent, .r_ight, .lowerLeft, .nbottom, .lowerRight, .ct_op, .cboxContent, .cbottom {float:left;	padding:0; margin:0;}
.upperLeft, .upperRight, .l_eft, .r_ight, .lowerLeft, .lowerRight {width:25px; height:25px;}
.nt_op, .nboxContent, .nbottom {width:440px;}

.upperLeft {background:url('images/Simages/upperLeft.gif') no-repeat; }
.nt_op,.ct_op {background-image:url('images/Simages/top.gif'); height:25px;}
 .upperRight {background:url('images/Simages/upperRight.gif') no-repeat;}

.l_eft {background:url('images/Simages/left.gif') repeat; width:25px; height:100%; }
.nboxContent, .cboxContent {background-color:#1D1D1D; height:100%; }
.r_ight {background:url('images/Simages/right.gif') repeat; width:25px; height:100%;}

.lowerLeft {background:url('images/Simages/lowerLeft.gif') no-repeat; }
.nbottom, .cbottom {background-image:url('images/Simages/bottom.gif'); height:25px;}
 .lowerRight {background:url('images/Simages/lowerRight.gif') no-repeat;}

Regards,
Noob T_T

[JRM]

Perhaps with the nested CSS, something was not defined before implemented?
Also, you have two definitions for nt_op.

[KadajXII]

Perhaps with the nested CSS, something was not defined before implemented?
Also, you have two definitions for nt_op.

ya i define twice as some of the attribute same with other classes and ease my adjusting.
I found the prob, just that i do not know how to solve @@"

the prob is this 2 image (in attachment) have percentage height, if the column in table do not have any content, it will stays at 0%. dats y it wont display out.
FYI, my textbox bg image layout is as follow:

div (img upperLeft) | div (img t_op) | div (img upperRight)
table
tr td (img l_eft) | td (content with bg color) | td (img r_ight)
/table
div (img lowerLeft) | div (img bottom) | div (img lowerRight)

So i go the other way round, put it in fix width instead of using percentage. i combine the l_eft center and r_ight (in attachment). and it solve my prob.

my new codes is here

<div class="upperLeft"></div><div class="nt_op"></div><div class="upperRight"></div>
<div class="nboxbg">
  <div class="nContent">
    <?php getNboxContent(); ?>
  </div>
</div>
<div class="lowerLeft"></div><div class="nbottom"></div><div class="lowerRight"></div>

my CSS

.upperLeft, .nt_op, .upperRight, .l_eft, .nboxContent, .r_ight, .lowerLeft, .nbottom, .lowerRight, .ct_op, .cboxContent, .cbottom {float:left;	padding:0; margin:0;}
.upperLeft, .upperRight, .l_eft, .r_ight, .lowerLeft, .lowerRight {width:25px; height:25px;}
.nt_op, .nbottom {width:460px;}
.ct_op, .cbottom {width:400px;}

.upperLeft {background:url('images/Simages/upperLeft.gif') no-repeat; margin-left:2px;}
.nt_op,.ct_op {background-image:url('images/Simages/top.gif'); height:25px;}
 .upperRight {background:url('images/Simages/upperRight.gif') no-repeat;}

.cboxbg {background-image:url('images/Simages/commentBg.gif'); height:100%; width:442px; margin-left:0px; }
.nboxbg {background-image:url('images/Simages/newsBg.gif'); height:100%; width:500px; margin:0 5px;}

.lowerLeft {background:url('images/Simages/lowerLeft.gif') no-repeat; margin-left:2px;}
.nbottom, .cbottom {background-image:url('images/Simages/bottom.gif'); height:25px;}
 .lowerRight {background:url('images/Simages/lowerRight.gif') no-repeat;}

.nContent, .cContent {font-size:10pt; text-align:justify; padding-left:30px; padding-right:25px;}