Control (in table cell) with a width of 100% causes the end of the control to be clipped - ASP.NET 2

[jwwishart]

Hi,

Weve been doing this sort of thing frequently in ASP.NET but now were
working on a project in ASP.NET 2.0 and were having this very strange
problem.

With the following XHTML...

<table style="width: 500px" cellpadding="2" cellspacing="0">
<tr>
<td class="TableHeader" colspan="2">
<asp:Label ID="lblTitle" runat="server" Text="New
Document"></asp:Label>
</td>
</tr>
<tr>
<td class="FormLabel" style="width: 15%">Title</td>
<td>
<asp:TextBox ID="txtDocumentTitle" runat="server"
Width="100%"
MaxLength="255"></asp:TextBox>
</td>
</tr>
<tr>
<td class="FormLabel" valign="top">Details</td>
<td>
<asp:TextBox ID="txtDocumentDetails" runat="server"
Width="100%"
TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>

In the designer AND in the rendered HTML i get the two text boxes
actually extending OVER the border of there respective containing
cells! So, with the multiline textbox for example, only about half of
the vertical scroll bar can be seen.

So far I've used methods like adding margin and padding styles to push
the widths within the cell so that you can see whole text box. This is
not really adequate (at least for all situations!)

The above example is not the only one i could give. I've got the same
issue with a GridView in a DIV (scrolling div) which i cant get to butt
against the right hand side of the div in a way that doesn't partically
hide one on the columns in the GridView..

Any help with...
1. ...Why XHMTL (causes) or IE renders things this way! (We can't use
Firefox, so please dont ask! Though im considering testing the page on
firefox to try and determine whether it is a browser problem or an
XHTML problem!)
2. ...a solution

Will be greatly appreciated!