DOCTYPE Strict uses "correct" box model - so why is 100% width now useless? - Page 2

Shadow Lynx

Consider this simple HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Strict kills my widths!</title>
</head>
<body>
<table style="width:400px; table-layout:fixed;">
<colgroup>
<col style="width:50%;"/ >
<col style="width:50%;"/ >
</colgroup>
<tr>
<td>
<input type="text" style="width:100%;" />
</td>
<td>
<input type="text" style="width:100%;" />
</td>
</tr>
</table>
</body>
</html>
Both text boxes have their right edges clipped off. Sure, the "Proper"

box model says that width is the width of the content, excluding the
padding and border (and margin, of course.) Wonderful. So now, with
all standard text boxes (and many other controls) having things like
padding and borders, what good is a percentage width?
I could (and do, for lack of a better workaround) use a slightly
smaller width, like 98%, but that has to be adjusted depending on the
width of the table and how many columns it has - smaller tables require

even more reduction in percentage width for the text boxes to fit.
I know the geniuses in the W3C think that their box model is the best,
but if you draw a box (essentially a border) and then write some text
in the middle of it with some space between the edge of the box and the

text, then ask any kid to measure the width of the box, he'll measure
from border to border, INCLUDING padding!
I know, I should stop whining and just stop using STRICT, right? Well,

I could, but that's a step backwards and there are other parts of the
strict doctype that are very appealing.
There's got to be a viable solution to this. Sure, 100% minus padding
minus border is the real answer, but since that's not possible (without

using dynamic properties) to put specify such a formula as width, how
can I solve this issue?
I FEEL LIKE I'M TAKING CRAZY PILLS!

Mar 28 '06

Follow Post Reply

5823

Shadow Lynx

"Tony" <to****@dslextreme.WHATISTHIS.com> wrote:

I still don't understand why you can't define a class, assign all the text
boxes that class, and then manipulate the width of that class. It still
puts your width declaration in one place.
If I have a table of set width and I want to manipulate all fields in
several columns, it's much easier to set the fields to percentage (generally
100%) widths so they fit themselves to the table as needed, but I see your
point with using a class.
I also don't understand why you can't use <td><div><input
type="text"></div></td>, and set the margins of the <div> appropriately
(again, using a class)

Eureka, I think you've found the workaround I'm looking for! If I use a div
with a horizontal margin equal to that of the horizontal padding of the
table cell and place the 100% width textbox in the div, it fits! Of course,
this is still nutty, but it IS a viable workaround. I could relatively
easily wrap all fields in a div with a simple class associated with it that
would fix my issue.

I've added another row to my demo page that shows your fix:
http://www.digitolle.net/google/hotboxmodelaction.htm

Thanks again and I still think the "correct" box model is goofy. (o;

Apr 19 '06 #51

DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?

This discussion thread is closed

Similar topics