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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
TildeHash
Forum Commoner
Posts: 43
Joined: Fri Jul 16, 2010 7:17 am
Location: Apple Valley, California

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

Post 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
User avatar
TildeHash
Forum Commoner
Posts: 43
Joined: Fri Jul 16, 2010 7:17 am
Location: Apple Valley, California

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

Post by TildeHash »

Solution = CSS:[text]box-sizing: border-box;[/text]
Post Reply