Log in

View Full Version : CSS box


jakegeek9
09-04-2010, 01:59 PM
Why does the width have no effect on outside table tags? When I load it in any browser the left & right side of the table do no appear or they appear very small like 5px wide when it should be 30px. If I put something inside the table(like some text) on the two outside portions the images will appear.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
background: url(/images/bk.png) repeat-x #4b4b4b;
height: 100%;
}
.banner {background-image:url(/images/banner.png); background-repeat: no-repeat; width:900px; height: 288px; margin: 0 auto; }

.centerSpace{ width: 1024px; margin: 0 auto; background-color:#06F; }
.bkTL{
background:url(images/menuBK/menuTL.png) no-repeat;
width: 30px;
height:30px;
}
.bkTR{ background:url(images/menuBK/menuTR.png) no-repeat;
width: 30px;
height:30px;
}
.bkBL{ background:url(images/menuBK/menuBL.png) no-repeat;
width: 30px;
height:30px;
}
.bkBR{ background:url(images/menuBK/menuBR.png) no-repeat;
width: 30px;
height:30px;
}
.bkT{ background:url(images/menuBK/menuT.png) repeat-x;
width: 100%;
height:30px;
}
.bkL{ background:url(images/menuBK/menuL.png) repeat-y;
width: 30px;
height:100%;
}
.bkR{ background:url(images/menuBK/menuR.png)repeat-y;
width: 30px;
height:100%;
}
.bkB{ background:url(images/menuBK/menuB.png) repeat-x;
width: 100%;
height:30px;
}
.bkC{ background-color:#FFF;
width: 100%;
height:100%;
}
.menuWrapper{
width: 250px;
height: 500px;
}


</style>
</head>
<body>
<div class="centerSpace">
<div class="banner"></div>
<div class="menuWrapper">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td class="bkTL"></td>
<td class="bkT"></td>
<td class="bkTR"></td>
</tr>
<tr>
<td class="bkL"></td>
<td class="bkC"></td>
<td class="bkR"></td>
</tr>
<tr>
<td class=" bkBL"></td>
<td class="bkB" ></td>
<td class="bkBR"></td>
</tr>
</table>

</div>
</div>
</body>
</html>