Page 1 of 1

How can I make input fields act the way they do in Quirks

Posted: Mon Jun 18, 2012 7:45 pm
by TildeHash
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?

:banghead: Thanks

Re: How can I make input fields act the way they do in Quirk

Posted: Sat Jun 23, 2012 2:07 am
by TildeHash
Solution = CSS:[text]box-sizing: border-box;[/text]