Forum Moderators: open
First post, designing a site for myself as part of forwarding my hosting company.
I have up until this point never had the problem I am having and have tried numerous ideas to fix it.
I have a table in a "sidebar" which is within a table. The inside table is 330px high. However the td it is in ranges from 400-800px high (lots of pages etc).
The inside table keeps dropping to the middle of the gap and cannot be moved. the coding is bellow :
<td width="200">
<tablealign="center" border="0" cellspacing="0" cellpadding="0" height="330" width="200">
<tr valign="top">
<td width="5" height="5"> </td>
<td width="190" height="5"> </td>
<td width="5" height="5"> </td>
</tr>
<tr class="c7" valign="top">
<td width="5" height="5"> </td>
<td class="c1" width="190" height="200">
<p> </p>
<p class="address" align="center"><strong>Sidebar content</strong><br />
</p>
<p> </p>
</td>
<td width="5" height="5"> </td>
</tr>
<tr valign="top">
<td width="5" height="5"> </td>
<td width="190" height="20"> </td>
<td width="5" height="5"> </td>
</tr>
<tr valign="top">
<td width="5" height="5"> </td>
<td width="190" class="c1" height="100">
<p> </p>
<p class="address" align="center"><strong>More sidebar content</strong><br />
</p>
<p> </p>
</td>
<td width="5" height="5"> </td>
</tr>
<tr valign="top">
<td width="5" height="5"> </td>
<td width="190" height="100%"> </td>
<td width="5" height="5"> </td>
</tr>
</table>
</td>
Any help would be greatly appreciated.
[edited by: tedster at 11:42 pm (utc) on July 14, 2009]
I'd say that the attribute "valign=top" (you could also use style="vertical-align:top") is misplaced in your code. It should be an attribute of the <td> that contains the nested table. Essentially, valign is a cell attribute, not a row attribute:
valign = top¦middle¦bottom¦baseline [CI]This attribute specifies the vertical position of data within a cell.
W3C Table Specs [w3.org]
Also, whenever you have rendering issues, the first thing to do is make sure the mark-up you are using validates:
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Unless you know the mark-up is valid, you can have an impossible job on your hands.
you should not be using tables for page layout, it is not their intended purpose.
I would suggest that you read some of the following links...
Rant is now over ;)
So here is your code tidied up somewhat...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
table {
border-collapse:collapse;
}
td {
padding:0;
vertical-align:top
}
#td0 {
width:5px;
height:5px;
}
#td1 {
width:180px;
}
#td2 {
height:200px;
}
#td3 {
height:20px;
}
#td4 {
height:100px;
}
.address {
text-align:center;
}
</style></head>
<body><table><tr>
<td>
<table>
<tr>
<td id="td0"> </td><td id="td1"> </td><td> </td>
</tr><tr class="c7">
<td> </td>
<td id="td2" class="c1">
<p> </p>
<p class="address"><strong>Sidebar content</strong></p>
<p> </p>
</td>
<td> </td>
</tr><tr>
<td> </td><td id="td3"> </td><td> </td>
</tr><tr>
<td> </td>
<td id="td4" class="c1">
<p> </p>
<p class="address"><strong>More sidebar content</strong></p>
<p> </p>
</td>
<td> </td>
</tr><tr>
<td> </td><td> </td><td> </td>
</tr>
</table>
</td>
</tr></table></body>
</html>
