How do I make a table cell appear 100%, regardless of the user's screen resolution? For example, if you go to http://www.vineyardesigns.com/template/stretched.shtml and view the red line at the top or the green line at the bottom, you can see it's stretched. I'm working on a template where I've set the width to 100% already. The left side is showing correctly but the right side has a gap...it's not stretched all the way at all.
Here's part of my code:
#mainTbl {
position: absolute;
top: 0px;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
}
#mainTbl #contentTbl {
background-image: url(http://myimage.gif);
background-repeat: repeat-y;
}
#mainTbl #contentTbl #navTbl {
background-image: url(navbar.gif);
background-repeat: no-repeat;
}
.style11 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
-->
</style>
<script src="scripts/my_content.js" type="text/javascript"></script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" name="mainTbl">
Any feedback would be great. Thanks!