Okay, here's the deal. When using Firefox or Chrome, if you make a table with four columns, each containing a text type input field styled with 100% width, each input field expands past the width of the columns, especially when the table's width is quite small. This is when you use the DocType "<!DOCTYPE html>", but when you use "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'' or no DocType at all, the input fields fill the columns 100% as expected. Because the browser defaults to "Quirks Mode".
Problem code:
Code: Select all
<!DOCTYPE html>
<html>
<table width="100%" border="1">
<tbody>
<tr>
<td>
<input type="text" style="width: 100%;">
</td>
<td>
<input type="text" style="width: 100%;">
</td>
<td>
<input type="text" style="width: 100%;">
</td>
<td>
<input type="text" style="width: 100%;">
</td>
</tr>
</tbody>
</table>
</html>
Anyone know how to make these input fields stay within their columns without using Quirks Mode?

Thanks