Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

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

2 views
Skip to first unread message

Shadow Lynx

unread,
Mar 28, 2006, 5:16:10 PM3/28/06
to
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!

Jukka K. Korpela

unread,
Mar 29, 2006, 1:16:27 PM3/29/06
to
Shadow Lynx wrote:

> Consider this simple HTML:

Consider setting up a demo page and posting the URL next time. Are we
supposed to guess whether you made an error in copying the text, and is
everyone and his brother supposed to set up a text page just because you
couldn't be bothered?

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"

That's wrong, by the specs. Whether it has any impact is a different
matter, but why would you try with a wrong document type declaration?
Hint: the thing in quotes is case-sensitive.

> <col style="width:50%;"/ >
> <col style="width:50%;"/ >

Since you have not set cellpadding and cellspacing, they default to
something nonzero, though small. What did you expect a browser to do
when asked to allocate 100% _and_ a fex pixels?

> Both text boxes have their right edges clipped off.

I can't see what you mean. (Testing on IE 7 beta preview right now.)
Which browser(s) are you referring to?

> I know, I should stop whining and just stop using STRICT, right?

You should stop whining and explain what you are trying to accomplish.
The general idea is to put one form field on one line. That's good for
usability and accessibility. You might see your problem vanish in a puff
of reason.

> I FEEL LIKE I'M TAKING CRAZY PILLS!

Is that your excuse for mistyping the document type declaration?

Followups trimmed.

Gérard Talbot

unread,
Mar 29, 2006, 5:58:25 PM3/29/06
to
Jukka K. Korpela wrote :

> Shadow Lynx wrote:
>
>> Consider this simple HTML:
>
> Consider setting up a demo page and posting the URL next time. Are we
> supposed to guess whether you made an error in copying the text, and is
> everyone and his brother supposed to set up a text page just because you
> couldn't be bothered?
>

I fully agree with your request/comment of an url here. Not having an
url is always annoying, not convenient. Whining, bitching and
misunderstanding/confusing what is CSS1 box model with table model is
furthermore annoying.

>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
>
> That's wrong, by the specs. Whether it has any impact is a different
> matter, but why would you try with a wrong document type declaration?
> Hint: the thing in quotes is case-sensitive.
>
>> <col style="width:50%;"/ >
>> <col style="width:50%;"/ >
>
> Since you have not set cellpadding and cellspacing, they default to
> something nonzero, though small. What did you expect a browser to do
> when asked to allocate 100% _and_ a fex pixels?
>

[snipped valid criticism that I agree with]

"In this [automatic table layout] algorithm (which generally requires no
more than two passes), the table's width is given by the width of its
columns (and intervening borders)." coming from CSS 2.1, Section 17.5.2.2
http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

The table's cellpadding is normally included in the column width. It's
not added on top of the column width. And there are browser
incompatibilities on this. Mozilla rv:1.8+ (Firefox 1.5.x, Seamonkey
1.x) and Opera 6.06 got this right but IE6, IE 7 beta 2, Firefox 1.0.x,
NS 7+, Opera 7+ all got this wrong.

http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/TableBugColWidth.html

Gérard
--
remove blah to email me

Shadow Lynx

unread,
Mar 30, 2006, 12:04:17 PM3/30/06
to
My humble apologies for not providing a demo page.

You can see it in action at
http://www.digitolle.net/google/hotboxmodelaction.htm

You're right about the DOCTYPE line - it should be this (I think):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You're also right that it has no impact on the rendering.

Once again, you're right that not specifying cellpadding means that it
defaults to a non-zero value, meaning that there is padding by default.
Yes, I'm aware of this and I do want padding in my table cells.

What I WANT is for the browser to render an object within the USEABLE
client area of a parent object. The best example of where I believe
the "correct" box model fails to be effective and logical is when using
a standard text box set to 100% width within a standard table cell with
default borders, padding, etc. In ths scenario, the table is set to
table-layout: fixed, which, of course, means that the table doesn't
base its layout on its contents and its cell widths are hard set.

If you have a parent object that has padding and you have a child
object that has a border and padding (let's assume zero margin for now)
and you set the child object's width to 100% and the parent object to a
specific pixel width, let's just say 250px, the "correct" box model
states that the child object's new width will be 250px PLUS its padding
and border widths. This is completely illogical. Ask a child to draw
some text and then give that text a border a small distance away and
then ask the same child to measure the width of the new object and he
will measure including the border (and the "padding" between the border
and text he created)!

Please, oh wise ones of the css box model, explain to me the correct
way to use Strict and have child objects with padding and borders set
to 100% width inside of parent objects that have padding and fixed
widths. That's all I want to know. This isn't just about tables and
cells, it's about any object inside of a Div, etc. as well.

Gérard Talbot

unread,
Mar 30, 2006, 10:57:43 PM3/30/06
to
Shadow Lynx wrote :

> My humble apologies for not providing a demo page.
>
> You can see it in action at
> http://www.digitolle.net/google/hotboxmodelaction.htm
>
> You're right about the DOCTYPE line - it should be this (I think):
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> You're also right that it has no impact on the rendering.
>

Jukka mentioned that; you are mis-replying in the thread.

> Once again, you're right that not specifying cellpadding means that it
> defaults to a non-zero value, meaning that there is padding by default.

Jukka mentioned that; you are mis-replying in the thread.


> Yes, I'm aware of this and I do want padding in my table cells.
>
> What I WANT is for the browser

Jukka asked you: "Which browser(s) are you referring to?"

"The" browser or "a" browser is not helpful here.

to render an object within the USEABLE
> client area of a parent object.

You are the one who set the table width to 400px. Here, you are speaking
of "an object within the USEABLE client area of a parent object." Note
how this is quite abstract: which object? which parent object? Why do
you cap-lock "USEABLE"? If you're posting an url, why not ask questions
based on that webpage? Why are you talking in general terms?

The best example of where I believe
> the "correct" box model


Are you referring to the CSS1 box model? Are you referring to the table
rendering model? You have to make this utterly clear.

fails to be effective and logical is when using
> a standard text box set to 100% width within a standard table cell with
> default borders, padding, etc. In ths scenario, the table is set to
> table-layout: fixed, which, of course, means that the table doesn't
> base its layout on its contents and its cell widths are hard set.
>

We still do not know what you are exactly trying to do. What's your real
webpage, what you want to achieve, etc.?

> If you have a parent object that has padding and you have a child
> object that has a border and padding (let's assume zero margin for now)
> and you set the child object's width to 100% and the parent object to a
> specific pixel width, let's just say 250px, the "correct" box model
> states that the child object's new width will be 250px PLUS its padding
> and border widths.

No. It depends on how you have define the parent object.

If you want to confuse readers of your posts furthermore, then bring up
a totally different example into this thread rather than focusing on the
concrete example that you have brought up with your url.

This is completely illogical. Ask a child to draw
> some text and then give that text a border a small distance away and
> then ask the same child to measure the width of the new object and he
> will measure including the border (and the "padding" between the border
> and text he created)!

How would the child measure such distance if there was no border?
Anyway, why don't you want to understand and comply with how the spec works?

>
> Please, oh wise ones of the css box model, explain to me the correct
> way to use Strict and have child objects with padding and borders set
> to 100% width inside of parent objects that have padding and fixed
> widths.

For the last time: are you referring to the CSS1 box model or table model?

That's all I want to know. This isn't just about tables and
> cells, it's about any object inside of a Div, etc. as well.
>

Gérard

Shadow Lynx

unread,
Mar 31, 2006, 1:13:44 AM3/31/06
to
Gérard, first, I want to simply thank you for replying to me, as I
realize I must be confusing the issue. I will do my best to answer
your questions, and hopefully you'll at least start to understand where
my confusion lies and help me understand why the box model is the way
it is. Not to sound even more idiotic than I already do, but what do
you mean by "mis-replying in the thread?" As for using all-capital
letters on a word, I do that for emphasis and out of frustration.

Browser: IE 6
Referring to: CSS1 Box Model (although Table Box Model is related)
Issue Summary: Confusion on how/why browser renders object Width with
Strict DOCTYPE
Example Page: http://www.digitolle.net/google/hotboxmodelaction.htm

Issue Details:
This diagram sums up the difference between Transitional and Strict
width rendering difference for IE:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
(click Fix the Box Instead of Thinking Outside It)
Essentially, Transitional IE includes padding and border in calculating
overall width. This means that setting a child object's width to 100%
means that the child object always fits within the parent object
(assuming the child object has no margin).
In Strict (a.k.a. Correct) rendering, the horizontal space the object
consumes = width + padding + border. So, setting the width of a chlid
object to 100% that has a border of 1px and padding of 5px means that
the horizontal space it consumes = 100% of the parent object's Width
(not clientWidth) PLUS 2px (right/left border) PLUS 10px (right/left
padding) = 100% + 12px. I may be misunderstanding how this is working,
and if so, please tell me, but I think I'm at least close to how it's
calculated.

The Core Question:
When using DOCTYPE Strict, how can you set child objects with borders
and padding to fit exactly into the clientWidth of a parent object that
has padding and/or border and fixed width? In Transitional, a simple
100% would do, but with Strict, there appears to be no easy solution.
Yes, setting width:auto for child Div elements works to emulate the
Transitional 100% but not other percentage values, and what about
things like TextBoxes? See the example page for a visual comparison.

pegasusflig...@gmail.com

unread,
Apr 1, 2006, 12:06:28 AM4/1/06
to
Just use the Transitional DocType declaration. It has worked well for
me for quite a long time, so it should work for all. Besides,
Transitional keeps most of the coding from the previous version while
also incorporating all of the new coding.

____________________________________________

Patrick Reilly
1st Coy.
Colonel Seth Warner's Regiment

David Dorward

unread,
Apr 1, 2006, 3:27:16 AM4/1/06
to
pegasusflig...@gmail.com wrote:

Are you responding to something?
http://www.safalra.com/special/googlegroupsreply/

> Just use the Transitional DocType declaration.

Almost certainly not a good idea.

(a) It might not trigger quirks mode (depending on which variant is being
used)

(b) Most browsers still use the standard box model in quirks mode (so the
problem remains).

> Besides, Transitional keeps most of the coding from the previous version

Which is almost all legacy junk for which better replacements exist or is
actively harmful.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

David Dorward

unread,
Apr 1, 2006, 3:30:36 AM4/1/06
to
Shadow Lynx wrote:

> When using DOCTYPE Strict, how can you set child objects with borders
> and padding to fit exactly into the clientWidth of a parent object that
> has padding and/or border and fixed width?

{
display: block; /* Default for most
things you want want
to do this with */
width: auto; /* Ditto */
}

The other technique is to wrap the content in a divs to which you apply the
margin/padding/border instead.

> In Transitional

Don't confuse Quirks and Standards mode with Strict and Transitional
Doctypes. The mapping is not one to one.

Gérard Talbot

unread,
Apr 2, 2006, 7:47:22 PM4/2/06
to
pegasusflig...@gmail.com wrote :

> Just use the Transitional DocType declaration.

You have not quoted anything from the post which you were replying to.
In any case, transitional doctype declaration is to be avoided as much
as possible: there is very little to gain from using deprecated elements
and attributes.

> It has worked well for
> me for quite a long time, so it should work for all.

You have a very self-centered perspective here; technology, web-aware
devices, browsers, media-dependent applications do not and will not
consult you before rendering a webpage, you know.

> Besides,
> Transitional keeps most of the coding from the previous version while
> also incorporating all of the new coding.

It keeps most deprecated elements and attributes which can be better
rendered and controlled by CSS.

Shadow Lynx

unread,
Apr 2, 2006, 11:38:39 PM4/2/06
to
Transitional is exactly what I'm trying to get away from.

Shadow Lynx

unread,
Apr 2, 2006, 11:49:38 PM4/2/06
to
While it would work for DIV (as I noted in a previous post), setting
style="display:block; width:auto;" does not work for TextBox objects in
IE6. This will result in the textbox width equalling the size of the
initial value text set upon page load. I've added a DIV and a TextBox
with display:block;width:auto to my sample pages:

http://www.digitolle.net/google/hotboxmodelaction.htm

Also, using width:auto on a DIV does not solve the problem of
percentages other than 100%, for instance, how would you do things like
50%?

Shadow Lynx

unread,
Apr 2, 2006, 11:50:45 PM4/2/06
to
Gérard, do you have a reply to my Fri, Mar 31 2006 1:13 am post?

Leonard Blaisdell

unread,
Apr 3, 2006, 12:01:28 AM4/3/06
to

David Dorward

unread,
Apr 3, 2006, 2:45:54 AM4/3/06
to
Shadow Lynx wrote:

> While it would work for DIV (as I noted in a previous post), setting
> style="display:block; width:auto;" does not work for TextBox objects in
> IE6.

> Also, using width:auto on a DIV does not solve the problem of


> percentages other than 100%, for instance, how would you do things like
> 50%?

... just don't ignore the /rest/ of my post (which you failed to quote).

VK

unread,
Apr 3, 2006, 5:23:51 AM4/3/06
to

David Dorward wrote:
> {
> display: block; /* Default for most
> things you want want
> to do this with */
> width: auto; /* Ditto */
> }


<http://www.pacificnet.net/~johnr/cgi/aesop1.cgi?sel&TheFoxandtheGrapes2>


;-)

Shadow Lynx

unread,
Apr 3, 2006, 8:34:04 PM4/3/06
to
Leonard, None taken, and thanks for the interesting sites. Even so,
netiquette is often a matter of preference, and I prefer to not
duplicate posts that already exist. I must admit, though, that I
thought Google Group's reply editor was a bit smarter in how it placed
replies in the thread tree (I assumed that posts were shown in thread
then date order, not simply date order.)

Now that we've visited the whole replying ideology, do you happen to
have any comments related to this conversation?

Shadow Lynx

unread,
Apr 3, 2006, 8:41:27 PM4/3/06
to
I must be confused. The only part of your post that I didn't directly
address was "The other technique is to wrap the content in a divs to
which you apply the margin/padding/border instead." Perhaps I'm not
certain of what you mean, but, if you look at my example page at
http://www.digitolle.net/google/hotboxmodelaction.htm you'll see that
placing a TextBox or DIV into a parent DIV doesn't help the situation.

Tony

unread,
Apr 3, 2006, 8:47:59 PM4/3/06
to
Shadow Lynx wrote:
> Leonard, None taken, and thanks for the interesting sites.

Who is Leonard?

> Even so,
> netiquette is often a matter of preference, and I prefer to not
> duplicate posts that already exist.

And I prefer to have some context so I know what the hell people are
talking about

> I must admit, though, that I
> thought Google Group's reply editor was a bit smarter in how it placed
> replies in the thread tree (I assumed that posts were shown in thread
> then date order, not simply date order.)

I don't know what Google Groups does, since I don't use it.

>
> Now that we've visited the whole replying ideology, do you happen to
> have any comments related to this conversation?
>

Plenty, but I doubt you want to hear them.

Beauregard T. Shagnasty

unread,
Apr 3, 2006, 10:40:06 PM4/3/06
to
Shadow Lynx wrote:

> Leonard, None taken, and thanks for the interesting sites. Even so,
> netiquette is often a matter of preference,

Netiquette is netiquette. Why would you want to disregard what is common
throughout Usenet?

> and I prefer to not duplicate posts that already exist.

Do you mean you prefer to not quote what you are replying to? Be
prepared for lots more posts like this.

> I must admit, though, that I thought Google Group's reply editor was a
> bit smarter in how it placed replies in the thread tree (I assumed
> that posts were shown in thread then date order, not simply date
> order.)

This is not a web site or web page. This is Usenet. We are all using
newsreaders and an NNTP connection to the Usenet servers.

> Now that we've visited the whole replying ideology, do you happen to
> have any comments related to this conversation?

I've reread the entire thread and I still don't know what the real
question is.

--
-bts
-Warning: I brake for lawn deer

Shadow Lynx

unread,
Apr 3, 2006, 11:08:02 PM4/3/06
to
I'm afraid there must be a problem with your newsreader, because when I use
a newsreader (Outlook Express, and yes, I know it's a rather weak
newsreader) I can see the entire conversation as a thread from each and
every one of you back up to my original post.

Leonard Blaisdell, or Leo, as he calls himself, is a person who posted three
links on the very thing you're getting so upset about - netiquette, more
specifically, posting and quoting what you're replying to. Because my pet
peeve is getting off-topic (as we are now doing), I hope to make you (and
Mr. Shagnasty) happy by modifying my behavior to suit your tastes.
Honestly, please let's stop this tangent and get back to my original
question.

Here is a copy of my most succinct post on my
question/confusion/frustration, and I welcome yours or Mr. Shagnasty's or
anyone else who is knowledgeable on the subject:

Browser: IE 6
Referring to: CSS1 Box Model (although Table Box Model is related)
Issue Summary: Confusion on how/why browser renders object Width with
Strict DOCTYPE
Example Page: http://www.digitolle.net/google/hotboxmodelaction.htm

Issue Details:
This diagram sums up the difference between Transitional and Strict
width rendering difference for IE:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
(click Fix the Box Instead of Thinking Outside It)
Essentially, Transitional IE includes padding and border in calculating
overall width. This means that setting a child object's width to 100%
means that the child object always fits within the parent object
(assuming the child object has no margin).
In Strict (a.k.a. Correct) rendering, the horizontal space the object
consumes = width + padding + border. So, setting the width of a chlid
object to 100% that has a border of 1px and padding of 5px means that
the horizontal space it consumes = 100% of the parent object's Width
(not clientWidth) PLUS 2px (right/left border) PLUS 10px (right/left
padding) = 100% + 12px. I may be misunderstanding how this is working,
and if so, please tell me, but I think I'm at least close to how it's
calculated.

The Core Question:


When using DOCTYPE Strict, how can you set child objects with borders
and padding to fit exactly into the clientWidth of a parent object that

has padding and/or border and fixed width? In Transitional, a simple
100% would do, but with Strict, there appears to be no easy solution.
Yes, setting width:auto for child Div elements works to emulate the
Transitional 100% but not other percentage values, and what about
things like TextBoxes? See the example page for a visual comparison.


- Shadow Lynx

------

"Tony" <ton...@dslextreme.WHATISTHIS.com> wrote in message
news:1233geu...@corp.supernews.com...

Beauregard T. Shagnasty

unread,
Apr 3, 2006, 11:42:47 PM4/3/06
to
Shadow Lynx wrote:

> I'm afraid there must be a problem with your newsreader, because when
> I use a newsreader (Outlook Express, and yes, I know it's a rather
> weak newsreader) I can see the entire conversation as a thread from
> each and every one of you back up to my original post.

You are assuming that the post you replied to has propagated to all the
thousands of servers we use. It is quite possible that post will come
later, or not at all to my - or other - newsservers. Or yours.

Some/many of us may also have our newsreaders set to "Hide Read
Messages" which makes it far easier to read new posts. This way you do
not have to pick through hundreds of threads looking for five or six new
posts. All you see are the new ones.

I guess we should mention that top-posting is also frowned upon in these
groups. Feel free to press the PageDown key before beginning your reply.
Carefully trim the quoted material as well.
http://oakroadsystems.com/genl/unice.htm#upside

> Leonard Blaisdell, or Leo, as he calls himself, is a person who
> posted three links on the very thing you're getting so upset about -
> netiquette, more specifically, posting and quoting what you're
> replying to.

You will be much more welcome here if you follow these guidelines.
Thanks.

Shadow Lynx

unread,
Apr 4, 2006, 11:55:29 AM4/4/06
to
OH FOR FUCKS SAKE GET A GOD DAMNED LIFE! If you have time to BITCH
about how other fucking people form their GOD DAMNED SENTANCES then why
don't you just answer the FUCKING question!!!!??? FUCK THE GOD DAMNED
REPLY METHOD! After more than 20 posts NO ONE CAN ANSWER THE
QUESTION!!?!??!?! You have spent more time whining about "top posting"
and "quoting" and other stupid shit that a bunch of nerds with no life
have put into documentation that REAL PEOPLE DON'T GIVE A SHIT ABOUT!!!

Tony

unread,
Apr 4, 2006, 12:51:07 PM4/4/06
to
Shadow Lynx wrote:
> I'm afraid there must be a problem with your newsreader, because when I use
> a newsreader (Outlook Express, and yes, I know it's a rather weak
> newsreader) I can see the entire conversation as a thread from each and
> every one of you back up to my original post.

I choose to only see the new posts. The problem is that you choose not
to abide by the generaly accepted etiquitte of this (and most other)
newsgroups.

> Leonard Blaisdell, or Leo, as he calls himself, is a person who posted three
> links on the very thing you're getting so upset about - netiquette, more
> specifically, posting and quoting what you're replying to. Because my pet
> peeve is getting off-topic (as we are now doing), I hope to make you (and
> Mr. Shagnasty) happy by modifying my behavior to suit your tastes.

Frankly, I don't care about your behavior. But if you want to get real
help, then it's generally a good idea to adhere to the conventions of
the group in which you are posting.

> Honestly, please let's stop this tangent and get back to my original
> question.

Given that I only see the current UNREAD posts, I have no idea what the
original question is. That was part of the point I was making.

> Example Page: http://www.digitolle.net/google/hotboxmodelaction.htm
>
> Issue Details:
> This diagram sums up the difference between Transitional and Strict
> width rendering difference for IE:
> http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
> (click Fix the Box Instead of Thinking Outside It)
> Essentially, Transitional IE includes padding and border in calculating
> overall width. This means that setting a child object's width to 100%
> means that the child object always fits within the parent object
> (assuming the child object has no margin).
> In Strict (a.k.a. Correct) rendering, the horizontal space the object
> consumes = width + padding + border. So, setting the width of a chlid
> object to 100% that has a border of 1px and padding of 5px means that
> the horizontal space it consumes = 100% of the parent object's Width
> (not clientWidth) PLUS 2px (right/left border) PLUS 10px (right/left
> padding) = 100% + 12px. I may be misunderstanding how this is working,
> and if so, please tell me, but I think I'm at least close to how it's
> calculated.
>
> The Core Question:
> When using DOCTYPE Strict, how can you set child objects with borders
> and padding to fit exactly into the clientWidth of a parent object that
> has padding and/or border and fixed width?

Exactly what width are you trying to fit?

Assume a div with width 100px, padding 5px, border 1px. The rendered
width of that div would be 112px.

Are you trying to place a div inside that? If so, the answer is simple:
you can't - not if you have padding. A better way to handle things would
be to create a div with NO padding, and another div inside with a MARGIN
set:

<div style="border:solid black 1px">
<div style="margin: 5px">
'padded' stuff here
</div>
</div>
<div style="border:solid black 1px">
<div style="margin: 0px">
'unpadded' stuff here
</div>
</div>


> In Transitional, a simple
> 100% would do,

IE, perhaps, but not X-browser

> but with Strict, there appears to be no easy solution.
> Yes, setting width:auto for child Div elements works to emulate the
> Transitional 100% but not other percentage values, and what about
> things like TextBoxes? See the example page for a visual comparison.

The thing is, with Strict, the rendering of the box model is
predictable. Since you know what it is going to do, you can adjust
accordingly. In this case, you know that the width is going to be INSIDE
the padding, so if you don't want the padding, leave it off. Handle it
with another internal div with a margin instead.

Tony

unread,
Apr 4, 2006, 12:52:48 PM4/4/06
to

Way to go - you must have read "How to win friends and influence
people", eh?

Follow the conventions of the group, and you will get help instead of
people bitching about how you act. Don't follow the conventions and -
well, you see where that gets you.

Shadow Lynx

unread,
Apr 5, 2006, 1:42:42 PM4/5/06
to
> Way to go - you must have read "How to win friends and influence people",
> eh?
>
> Follow the conventions of the group, and you will get help instead of
> people bitching about how you act. Don't follow the conventions and -
> well, you see where that gets you.

Ah, now I feel better after my Hyde impersonation. Seriously, though, I've
never, ever, in years of using newsgroups, had a even a single person go off
on a tangent (let alone several) about how to reply to a message. Never.
Like I said, I don't have a problem changing behavior in order to "better
interface" with other people, but I've never felt harassed to change on a
thread like this, and I'm very disappointed that it's so important that the
original question got lost in the shuffle as a result.

Even after all of my whining about your whining, I am going to stop using
Google's web interface to reply and stick with the newsreader, following the
hallowed quote-slice-reply method.


Shadow Lynx

unread,
Apr 5, 2006, 2:04:20 PM4/5/06
to
"Tony" <ton...@dslextreme.WHATISTHIS.com> wrote in message
news:12358sb...@corp.supernews.com...

> Shadow Lynx wrote:
>> I'm afraid there must be a problem with your newsreader, because when I
>> use a newsreader (Outlook Express, and yes, I know it's a rather weak
>> newsreader) I can see the entire conversation as a thread from each and
>> every one of you back up to my original post.
>
> I choose to only see the new posts. The problem is that you choose not to
> abide by the generaly accepted etiquitte of this (and most other)
> newsgroups.
>

But my old posts should be new posts to you, shouldn't they? Honestly, I
must be confused about how your newsreader (and perhaps most newsreaders)
work. I am prepared to be enlightened.

>> Leonard Blaisdell, or Leo, as he calls himself, is a person who posted
>> three links on the very thing you're getting so upset about - netiquette,
>> more specifically, posting and quoting what you're replying to. Because
>> my pet peeve is getting off-topic (as we are now doing), I hope to make
>> you (and Mr. Shagnasty) happy by modifying my behavior to suit your
>> tastes.
>
> Frankly, I don't care about your behavior. But if you want to get real
> help, then it's generally a good idea to adhere to the conventions of the
> group in which you are posting.
>
>> Honestly, please let's stop this tangent and get back to my original
>> question.
>
> Given that I only see the current UNREAD posts, I have no idea what the
> original question is. That was part of the point I was making.

Again, wouldn't my earlier posts appear UNREAD to you if you hadn't read
them yet? I suppose it depends on what your newsreader considers "current,"
but I would think that your newsreader wouldn't drop the first half of a
thread that contained "current" posts, because then the context would be
completely broken.

>
>> Example Page: http://www.digitolle.net/google/hotboxmodelaction.htm
>>
>> Issue Details:
>> This diagram sums up the difference between Transitional and Strict
>> width rendering difference for IE:
>> http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
>> (click Fix the Box Instead of Thinking Outside It)
>> Essentially, Transitional IE includes padding and border in calculating
>> overall width. This means that setting a child object's width to 100%
>> means that the child object always fits within the parent object
>> (assuming the child object has no margin).
>> In Strict (a.k.a. Correct) rendering, the horizontal space the object
>> consumes = width + padding + border. So, setting the width of a chlid
>> object to 100% that has a border of 1px and padding of 5px means that
>> the horizontal space it consumes = 100% of the parent object's Width
>> (not clientWidth) PLUS 2px (right/left border) PLUS 10px (right/left
>> padding) = 100% + 12px. I may be misunderstanding how this is working,
>> and if so, please tell me, but I think I'm at least close to how it's
>> calculated.
>>
>> The Core Question:
>> When using DOCTYPE Strict, how can you set child objects with borders
>> and padding to fit exactly into the clientWidth of a parent object that
>> has padding and/or border and fixed width?
>
> Exactly what width are you trying to fit?

I'm trying to set the width of a child object (such as a standard textbox
<input type=text> that has a built-in margin and padding) so that it fits
the entire available width inside of a parent object that has a fixed pixel
width.

I'm trying to understand how this rendering method is helpful. If I want to
setup a parent object's width to be a fixed pixel width and have all child
objects adjust accordingly (so I don't need to modify all child object's
widths every time I change a parent object's width) how can I possibly do so
if even one of the child objects needs padding and/or a border? Yes, DIVs
with width:auto that have padding/border will fill out fine, but what about
all kinds of other objects like TextBoxes? Are you saying that every object
that has border and padding must be wrapped in a div that has a margin
(because the auto:width rendering on the div will drop margin as necessary
to squeeze in the content objects that have padding/border)? What if I
don't really want any margin at all?

I'm just trying to understand how not including the border and padding in
overall width is a good idea when rendering objects within objects. Maybe
another attribute would make everyone happy that included border and padding
(leaving width alone) like TotalWidth. Is there such a thing and I'm just
unaware of it?


Tony

unread,
Apr 5, 2006, 3:39:48 PM4/5/06
to
Shadow Lynx wrote:
>>I choose to only see the new posts. The problem is that you choose not to
>>abide by the generaly accepted etiquitte of this (and most other)
>>newsgroups.
>
> But my old posts should be new posts to you, shouldn't they? Honestly, I
> must be confused about how your newsreader (and perhaps most newsreaders)
> work. I am prepared to be enlightened.

Well, for a couple of possibilities:

1) Your original post has not yet reached my news server, although the
reply has. I can't see your post if it isn't on my news server. You need
to remember that sometimes it can take a couple of DAYS for a post to
propogate everywhere.

2) I skipped over that thread last time I checked the newsgroup (for any
one of a thousand possible reasons). And since I automatically mark the
NG upon closing, then I won't see your original message the next time I
check in.

There are more possible reasons, but those should do for starters :)

> Again, wouldn't my earlier posts appear UNREAD to you if you hadn't read
> them yet? I suppose it depends on what your newsreader considers "current,"
> but I would think that your newsreader wouldn't drop the first half of a
> thread that contained "current" posts, because then the context would be
> completely broken.

Which is why we quote :)


As for your question -

Let's see if I can summarize:

You want to have a DIV, with a border and padding, within which you have
other elements that you want to extend the full width of the DIV

What I'm not clear on is this: why even have padding inside the DIV if
you want elements inside to extend the full width - border-to-border?

Also, something else to take into account: You are talking about DIV's
and INPUT's - they are not the same type of element. DIV displays as
BLOCK, but INPUT displays INLINE - inline elements don't work quite the
same when it comes to margins as block elements.

As for things working in Transitional vs. Strict - like I said, it may
work in IE, but have you tried looking at it with other browsers? The
big advantage to Strict is that you will have more consistency (not
perfect, sadly) across all browsers.

Trevor L.

unread,
Apr 6, 2006, 12:49:35 AM4/6/06
to
From: Beauregard T. Shagnasty - view profile
Date: Tues, Apr 4 2006 12:40 pm
Email: "Beauregard T. Shagnasty" <a.nony.m...@example.invalid>
Groups: comp.infosystems.www.authoring.stylesheets

Beauregard T. Shagnasty wrote

> This is not a web site or web page. This is Usenet. We are all using
> newsreaders and an NNTP connection to the Usenet servers.

I read this from Google Groups. It sends me an email with all topics
listed and I click on addresses such as
http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_thread/thread/7bec5fd9a15c3ebc
(This address appears in my address bar at this very moment as I am
typing.)
So the statement "we are all using newreaders" is incorrect

This is *not* my preference. I would much rather read it as I do the
Microsoft newsgroups. They appear under my emails under the title
Microsoft News Server and every post is listed in date order with
threads and replies nicely indented, etc.

Can anyone tell me how I can read this group the same way?

Leonard Blaisdell

unread,
Apr 6, 2006, 2:22:06 AM4/6/06
to
In article <1144298975.2...@i39g2000cwa.googlegroups.com>,
"Trevor L." <tan...@homemail.com.au> wrote:

> This is *not* my preference. I would much rather read it as I do the
> Microsoft newsgroups. They appear under my emails under the title
> Microsoft News Server and every post is listed in date order with
> threads and replies nicely indented, etc.
>
> Can anyone tell me how I can read this group the same way?

Trevor, I don't know how the Microsoft newsgroups expect a post, but
understand these for Usenet while using google groups:

<http://www.safalra.com/special/googlegroupsreply/>
<http://oakroadsystems.com/genl/unice.htm>
<http://cfaj.freeshell.org/google/>

What you read might not be as it is in the Microsoft groups, but it will
make a lot of people happy and inclined to help you. Thanks for
expressing an interest. Welcome to Usenet.

leo

--
<http://web0.greatbasin.net/~leo/>

David Dorward

unread,
Apr 6, 2006, 2:44:26 AM4/6/06
to
Trevor L. wrote:

>> This is not a web site or web page. This is Usenet. We are all using
>> newsreaders and an NNTP connection to the Usenet servers.

> I read this from Google Groups.

[snip]


> So the statement "we are all using newreaders" is incorrect

Google Groups is a newsreader. It does NTTP and presents newsgroups to the
user. :)

(Its just horrible ;)

> This is *not* my preference. I would much rather read it as I do the
> Microsoft newsgroups. They appear under my emails under the title
> Microsoft News Server and every post is listed in date order with
> threads and replies nicely indented, etc.
>
> Can anyone tell me how I can read this group the same way?

Configure whatever software you use to view these "Microsoft newsgroups" to
use an NNTP server on Usenet. Your ISP may provide one, or you can find a
third party service. Google finds http://www.usenetserver.com/ and
http://www.giganews.com/

Shadow Lynx

unread,
Apr 7, 2006, 11:06:56 AM4/7/06
to
"Trevor L." <tan...@homemail.com.au> wrote...

> I read this from Google Groups. It sends me an email with all topics
> listed and I click on addresses such as
> http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_thread/thread/7bec5fd9a15c3ebc
> (This address appears in my address bar at this very moment as I am
> typing.)
> So the statement "we are all using newreaders" is incorrect
>
> This is *not* my preference. I would much rather read it as I do the
> Microsoft newsgroups. They appear under my emails under the title
> Microsoft News Server and every post is listed in date order with
> threads and replies nicely indented, etc.
>
> Can anyone tell me how I can read this group the same way?
>
Trevor,

Thanks for backing me up on the not-everyone-doesn't-use-Google Groups
thing, although I must admit that using a newsreader is better in some ways.
Outlook Express is hardly the best, but it's faster and more organized than
Google Groups (and it's totally free and comes with just about any Windows
OS.) One thing I like better about Google is the Starring feature. Outlook
Express has a message flagging feature but it doesn't seem to work the way
I'd like. You might want to consider using OE for checking your Newsgroups
(I wish Outlook did NG so I could just have all NG and e-mail in one place.)


Shadow Lynx

unread,
Apr 7, 2006, 12:02:42 PM4/7/06
to
"Tony" <ton...@dslextreme.WHATISTHIS.com> wrote in message
> Well, for a couple of possibilities:
>
> 1) Your original post has not yet reached my news server, although the
> reply has. I can't see your post if it isn't on my news server. You need
> to remember that sometimes it can take a couple of DAYS for a post to
> propogate everywhere.
>
> 2) I skipped over that thread last time I checked the newsgroup (for any
> one of a thousand possible reasons). And since I automatically mark the NG
> upon closing, then I won't see your original message the next time I check
> in.
>
> There are more possible reasons, but those should do for starters :)
>

Wow, I didn't realize that propegation could be so slow and out of synch.
It's strange to me that a child record could ever be stored and accessible
somewhere without it's parent record being available [yet]. Just goes to
show that you learn something every day (that usenet is a little goofy when
it comes to data handling.) Thank you for clarifying the situation - now I
completely understand the hows and whys.

> As for your question -
>
> Let's see if I can summarize:
>
> You want to have a DIV, with a border and padding, within which you have
> other elements that you want to extend the full width of the DIV
>
> What I'm not clear on is this: why even have padding inside the DIV if you
> want elements inside to extend the full width - border-to-border?
>
> Also, something else to take into account: You are talking about DIV's and
> INPUT's - they are not the same type of element. DIV displays as BLOCK,
> but INPUT displays INLINE - inline elements don't work quite the same when
> it comes to margins as block elements.
>
> As for things working in Transitional vs. Strict - like I said, it may
> work in IE, but have you tried looking at it with other browsers? The big
> advantage to Strict is that you will have more consistency (not perfect,
> sadly) across all browsers.

OK, while I would like to figure out the parent-as-a-DIV situation, my
current focus is specifically on text boxes (input type=text) within a table
cell (td). I often like my table cells in exact-width tables to have
padding (cellpadding>=1) to allow space between the text in one column and
the text boxes in the next. Most text boxes come with padding and a border
to visually denote them as such and provide some space between the text
within the box and the border. This is where my head starts to hurt and I
don't understand how to do what I would like to do in Strict.

Check out the example page which visually provides this scenario: (the very
first cell exhibits my particular headache - chopped text box)
http://www.digitolle.net/google/hotboxmodelaction.htm


Beauregard T. Shagnasty

unread,
Apr 7, 2006, 5:17:39 PM4/7/06
to
Shadow Lynx wrote:

> Wow, I didn't realize that propegation could be so slow and out of
> synch.

Har! I quite politely told you that very fact four days ago, and you
told me to "GET A GOD DAMNED LIFE". <lol>

Shadow Lynx

unread,
Apr 7, 2006, 6:19:20 PM4/7/06
to
> Shadow Lynx wrote:
>
>> Wow, I didn't realize that propegation could be so slow and out of
>> synch.

"Beauregard T. Shagnasty" <a.non...@example.invalid> wrote in message


> Har! I quite politely told you that very fact four days ago, and you
> told me to "GET A GOD DAMNED LIFE". <lol>

>>>>(Four days ago...)


>>>>You are assuming that the post you replied to has propagated to all the
>>>>thousands of servers we use. It is quite possible that post will come
>>>>later, or not at all to my - or other - newsservers. Or yours.

Yes you did, but sometimes I don't hear things until they're repeated enough
times, heh. I didn't realize that your wishes really have nothing to do
with "netiquette" and have everything to do with the technical limitations
of Usenet and the whole NNTP thing. Yeah, I said "thing", the word you use
when you really don't know the right word(s) to use. (o;

I like you guys; I can yell at you like a big idiot and you don't scare
away. Now, BTS, do you happen to have any comments on my actual question
(the reason I started this post-a-looza in the first place?) [I realize
that you would want the whole ball of wax in this very message, but I figure
that the entire thread must have propagated to your server by now!]


Beauregard T. Shagnasty

unread,
Apr 8, 2006, 12:04:57 AM4/8/06
to
Shadow Lynx wrote:

>> Shadow Lynx wrote:
>>
>>> Wow, I didn't realize that propegation could be so slow and out of
>>> synch.
>
> "Beauregard T. Shagnasty" <a.non...@example.invalid> wrote

>> Har! I quite politely told you that very fact four days ago, and you
>> told me to "GET A GOD DAMNED LIFE". <lol>
>
>>>>> (Four days ago...) You are assuming that the post you replied to
>>>>> has propagated to all the thousands of servers we use. It is
>>>>> quite possible that post will come later, or not at all to my -
>>>>> or other - newsservers. Or yours.
>
> Yes you did, but sometimes I don't hear things until they're repeated
> enough times, heh. I didn't realize that your wishes really have
> nothing to do with "netiquette" and have everything to do with the
> technical limitations of Usenet and the whole NNTP thing. Yeah, I
> said "thing", the word you use when you really don't know the right
> word(s) to use. (o;

I should have used the "bigger hammer" then, eh? :-)

> I like you guys; I can yell at you like a big idiot and you don't
> scare away.

Scare? No way. We just lock and load the .. er ..

> Now, BTS, do you happen to have any comments on my actual question
> (the reason I started this post-a-looza in the first place?) [I
> realize that you would want the whole ball of wax in this very
> message, but I figure that the entire thread must have propagated to
> your server by now!]

No, I don't have an answer. I'm still not sure what you are trying to
accomplish.

Jasen Betts

unread,
Apr 8, 2006, 5:42:45 AM4/8/06
to
On 2006-04-06, Trevor L. <tan...@homemail.com.au> wrote:

>> This is not a web site or web page. This is Usenet. We are all using
>> newsreaders and an NNTP connection to the Usenet servers.
>
> I read this from Google Groups. It sends me an email with all topics
> listed and I click on addresses such as
> http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_thread/thread/7bec5fd9a15c3ebc
> (This address appears in my address bar at this very moment as I am
> typing.)
> So the statement "we are all using newreaders" is incorrect

google groups is in this case acting as a newsreader with an HTML interface.

> This is *not* my preference. I would much rather read it as I do the
> Microsoft newsgroups. They appear under my emails under the title
> Microsoft News Server and every post is listed in date order with
> threads and replies nicely indented, etc.
>
> Can anyone tell me how I can read this group the same way?

find a news server...

Bye.
Jasen

VK

unread,
Apr 8, 2006, 7:37:19 AM4/8/06
to

Shadow Lynx wrote:
> I like you guys; I can yell at you like a big idiot and you don't scare
> away. Now, BTS, do you happen to have any comments on my actual question
> (the reason I started this post-a-looza in the first place?)

There is no way to solve your problem: it is the way things are
implemented in W3C box model. I don't know why did they go this way but
may propose some possible answers:

1) Simply overlooked the consequences.
2) Wanted to enforce someone's in W3C ideas of "proper layout" onto
community: "no %%, only explicit units".
3) Option 2 with Option 1 combined.
4) Just because "Micro$oft" used another model, so to be different.
Funny, but possible - there are many cases like that.

Within the conventional CSS nothing one can do - but no one will ever
admit it in ciwas. It is like to expect the Pop screaming "There is no
God!" :-)
So it is going to be endless merry-go-round with explanations why you
don't need width:100% neither in this particular case nor anywhere
else.

I'm using loose DTD declaration (Transitional without URL) which is
formally correct but leaves IE in its regular box model. For others I
fix the box by script and hope on the best. Truthfully until this issue
is addressed it may be indeed better to avoid width:100% remainders in
your layout.

P.S. It is interesting that IE lets you "play standards" only up to
some limit. If the integrity of the graphics context is in danger, it
falls back to the Microsoft box even in CSS1Compat mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Box Fix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
margin: 0px 0px;
padding: 20px 20px;
background-color: #DDDDDD}
body {
width: 100%; height: auto;
margin: 5px 5px;
border: thin dotted;
padding: 5px 5px;
font: normal 0.8em Verdana, sans-serif;
color: #000000;
background-color: #FFFFFF}
#HOLDER1 {
position: relative;
left: 0px; top: 0px;
width: 75%; height: auto;
margin: 5px 5px;
border: thin outset;
padding: 5px 5px}
#P1 {
position: relative;
left: 0px; top: 0px;
width: 100%; height: auto;
margin: 5px 5px;
border: thin inset;
padding: 5px 5px}
</style>
</head>

<body
><div id="HOLDER1"
><p id="P1">Paragraph 1 in Holder 1</p
></div
></body>
</html>

Tony

unread,
Apr 10, 2006, 1:22:25 PM4/10/06
to
Shadow Lynx wrote:
>
> Wow, I didn't realize that propegation could be so slow and out of synch.
> It's strange to me that a child record could ever be stored and accessible
> somewhere without it's parent record being available [yet].

The problem is that you've made an assumption here - the messages are
totally separate as far as how they're stored. A message farther down
the thread tree is NOT a "child" of a previous message in that sense -
they stand alone.

Otherwise, you wouldn't be able to remove old posts from your servers,
which many news hosts do regularly.

> Just goes to
> show that you learn something every day (that usenet is a little goofy when
> it comes to data handling.)

Not really - but it is definitely quite different than a database-driven
forum.

> Thank you for clarifying the situation - now I
> completely understand the hows and whys.

Glad to help!

> OK, while I would like to figure out the parent-as-a-DIV situation, my
> current focus is specifically on text boxes (input type=text) within a table
> cell (td). I often like my table cells in exact-width tables to have
> padding (cellpadding>=1) to allow space between the text in one column and
> the text boxes in the next. Most text boxes come with padding and a border
> to visually denote them as such and provide some space between the text
> within the box and the border. This is where my head starts to hurt and I
> don't understand how to do what I would like to do in Strict.
>
> Check out the example page which visually provides this scenario: (the very
> first cell exhibits my particular headache - chopped text box)
> http://www.digitolle.net/google/hotboxmodelaction.htm

AH - OK, I see it now.

Yes, IE is setting the width = 100% of the outer width of the table
cell, whereas FF is setting it to the inner width. I have encountered
this before & fixed it, but I don't recall how offhand!

A couple thoughts occur to me: first, unless I'm understanding
something totally wrong, aren't your cells a fixed pixel width? If so,
then you can also give a fixed pixel width for the textbox. Alternately,
place the textbox inside a div (width:auto) and then set the textbox to
100% - it should fit to the width of the div (untested!)

Another thought is to leave the table width alone and control the width
by setting the textbox width - the TD will adjust to the contents then.

Shadow Lynx

unread,
Apr 13, 2006, 2:28:40 PM4/13/06
to
"Beauregard T. Shagnasty" <a.non...@example.invalid> wrote:
> No, I don't have an answer. I'm still not sure what you are trying to
> accomplish.

Sigh. Because you've "stuck with me" in this crazy thread. I'll explain
what I'm trying to accomplish once more:

Browser: IE 6
Referring to: CSS1 Box Model (although Table Box Model is related)
Issue Summary: Confusion on how/why browser renders object Width with
Strict DOCTYPE

Example Page: http://www.digitolle.net/google/hotboxmodelaction.htm

Issue Details:
This diagram sums up the difference between Transitional and Strict
width rendering difference for IE:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
(click Fix the Box Instead of Thinking Outside It)
Essentially, Transitional IE includes padding and border in calculating
overall width. This means that setting a child object's width to 100%
means that the child object always fits within the parent object
(assuming the child object has no margin).
In Strict (a.k.a. Correct) rendering, the horizontal space the object
consumes = width + padding + border. So, setting the width of a chlid
object to 100% that has a border of 1px and padding of 5px means that
the horizontal space it consumes = 100% of the parent object's Width
(not clientWidth) PLUS 2px (right/left border) PLUS 10px (right/left
padding) = 100% + 12px. I may be misunderstanding how this is working,
and if so, please tell me, but I think I'm at least close to how it's
calculated.

The Core Question:
When using DOCTYPE Strict, how can you set child objects with borders
and padding to fit exactly into the clientWidth of a parent object that

has padding and/or border and fixed width? In Transitional, a simple
100% would do, but with Strict, there appears to be no easy solution.


Yes, setting width:auto for child Div elements works to emulate the
Transitional 100% but not other percentage values, and what about
things like TextBoxes? See the example page for a visual comparison.

And a shorter version of the above:

While I would like to figure out the parent-as-a-DIV situation, my


current focus is specifically on text boxes (input type=text) within a table
cell (td). I often like my table cells in exact-width tables to have
padding (cellpadding>=1) to allow space between the text in one column and
the text boxes in the next. Most text boxes come with padding and a border
to visually denote them as such and provide some space between the text
within the box and the border. This is where my head starts to hurt and I
don't understand how to do what I would like to do in Strict.

Check out the example page which visually provides this scenario: (the very
first cell exhibits my particular headache - chopped text box)
http://www.digitolle.net/google/hotboxmodelaction.htm

Come on, Mr. Shagnasty - I know you've got a response to my real issue in
that whacky brain o' yours somewhere, even if it's just a simple: "You
can't - you're screwed." (o;


Shadow Lynx

unread,
Apr 13, 2006, 2:36:31 PM4/13/06
to
"VK" <school...@yahoo.com> wrote:
> There is no way to solve your problem: it is the way things are
> implemented in W3C box model.

I'm beginning to think that's the final answer and it worries me greatly
because 100% width (and percentage widths in general) are something I use
constantly to make alignment of form fields simple. At least, it was simple
before I tried going with the Strict way of life. The reason I'm worried is
that I believe that in some future version of IE, not far off, the "old
school" box model will no longer be available.

This flaw must be addressed. Any ideas whom I could contact about this?
Obviously the W3C, but there's got to be a more targeted entity that would
be more likely to at least deal with my concerns rather than filing them
away. I refuse to believe that this issue isn't affecting a very large
number of web designers...

As for the HTML you supplied, I'm not sure what you're trying to show,
exactly. I tried it out and see how it renders (I get a horizontal scroll
bar, which is ugly, to say the least) but am not sure what I'm looking
for/at?


Shadow Lynx

unread,
Apr 13, 2006, 2:51:19 PM4/13/06
to
"Tony" <ton...@dslextreme.WHATISTHIS.com> wrote:
> AH - OK, I see it now.
>
> Yes, IE is setting the width = 100% of the outer width of the table cell,
> whereas FF is setting it to the inner width. I have encountered this
> before & fixed it, but I don't recall how offhand!
>
> A couple thoughts occur to me: first, unless I'm understanding something
> totally wrong, aren't your cells a fixed pixel width? If so, then you can
> also give a fixed pixel width for the textbox. Alternately, place the
> textbox inside a div (width:auto) and then set the textbox to 100% - it
> should fit to the width of the div (untested!)
>
> Another thought is to leave the table width alone and control the width by
> setting the textbox width - the TD will adjust to the contents then.

I often used fixed-width tables because the table is often fitting into a
fixed-size layout. It must be fixed width (table-layout:fixed) because
otherwise textboxes set to width:100% will explode when they're filled with
a large amount of text, and those exploding textboxes will fatten up the
table as well, breaking the layout of the page (I hate horizontal
scrollbars!)

As for setting a pixel width on each and every textbox - then why bother
using a table for layout control? I may as well make everything
fixed-position while I'm at it. The beauty of the table is that you only
need to adjust the table's width and the (100% width) objects in its cells
will adjust accordingly, without having to manually update the width of
every object. At least, that's how it worked in MS's box model. Now, in
Strict, this does NOT work because of the calculation of Width and the fact
that a cell has a default padding of 1px and a textbox has a border of 1px
as well as padding of 1px. Sure, if I set the textbox width to 100%-6px,
that would work, except that's not valid and is just plain stupid. Setting
the textbox width to a value less than 100% works, depending on the pixel
width of the cell and table that's in (and it generally doesn't actually
fill the cell, again, depending on exactly what the width of the cell is.)

This shouldn't be rocket science, but I swear that sometimes standards
people try to make it so.

http://www.digitolle.net/google/hotboxmodelaction.htm
P.S. Look at my sample page in FireFox - it fails to render properly (in my
opinion) there, too, so it's not an IE problem - it's a standards problem.


Beauregard T. Shagnasty

unread,
Apr 13, 2006, 5:25:33 PM4/13/06
to
Shadow Lynx wrote:

> Come on, Mr. Shagnasty - I know you've got a response to my real issue
> in that whacky brain o' yours somewhere, even if it's just a simple:
> "You can't - you're screwed." (o;

You can't - you're screwed.

<lol>

Tony

unread,
Apr 13, 2006, 6:47:12 PM4/13/06
to
Shadow Lynx wrote:
>
> As for setting a pixel width on each and every textbox - then why bother
> using a table for layout control?

That's what CSS classes are for

> I may as well make everything
> fixed-position while I'm at it. The beauty of the table is that you only
> need to adjust the table's width and the (100% width) objects in its cells
> will adjust accordingly, without having to manually update the width of
> every object.

I honestly must be missing something, because I have never had a problem
with what I percieve you are trying to do.

Sorry - at this point, I don't think I can be of much more help - I
simply don't understand the problem.

VK

unread,
Apr 14, 2006, 3:38:14 AM4/14/06
to

Shadow Lynx wrote:
> This flaw must be addressed. Any ideas whom I could contact about this?
> Obviously the W3C, but there's got to be a more targeted entity that would
> be more likely to at least deal with my concerns rather than filing them
> away. I refuse to believe that this issue isn't affecting a very large
> number of web designers...

FedEx it to UN Council :-)

Seriously you can join to one of mailing lists at w3.org and mail your
opinion - but I doubt very much that it will produce an exploded bomb
effect. I think that eventually it will be like IE's IXMLHTTPRequest
which became XMLHttpRequest: "standard or not, but if you want to
survive you will do this in this way". So I think eventually browser
producers will start emulate IE's behavior: IE's box in quirk mode, W3C
box in strict mode. But it's just my opinion. By using -moz-binding CSS
extention it is possible to fix the box a la IE at least for Gecko: but
only for this browser and only if JavaScript is enabled. I'm thinking
to write a patch to add it if needed to all involved elements.

> As for the HTML you supplied, I'm not sure what you're trying to show,
> exactly.

Sorry: I mean the second div (with inset borders) inside the first one.
By using 100% I'm pushing W3C box out of its capabilities. So at least
on my Firefox 1.5.0.1 the right border hands out outside of the
containing div.
IE in the same situation spits on the W3C box and calculates properly
the available internal space by IE's model: so the internal div is
contained properly. At the same time it adds scrollbar for the body -
so *there* it is staying withing W3C box. This is what I mean to say:
IE uses (if forced) W3C box only if it allows to produce some
reasonnable graphics context. Where it is not possible it uses its own
model: sometimes both on the same page. I suspect that a good part of
"IE glitches" is connected with it.

pecan

unread,
Apr 16, 2006, 7:42:36 AM4/16/06
to

"Shadow Lynx" <shdwly...@yahoo.com> wrote in message
news:74d88$443e9dcf$4087c713$11...@FOXVALLEY.NET...

> "Tony" <ton...@dslextreme.WHATISTHIS.com> wrote:
> > AH - OK, I see it now.
> >
> > Yes, IE is setting the width = 100% of the outer width of the table
cell,
> > whereas FF is setting it to the inner width. I have encountered this
> > before & fixed it, but I don't recall how offhand!
> >

Using -100% helps with DIV but not with TD.

Catherine


Shadow Lynx

unread,
Apr 17, 2006, 5:58:25 PM4/17/06
to
From: "Tony" <ton...@dslextreme.WHATISTHIS.com>

> I honestly must be missing something, because I have never had a problem
> with what I percieve you are trying to do.

There's no perception about it. See this "strict" page:
http://www.digitolle.net/google/hotboxmodelaction.htm

Notice how a textbox of 100% doesn't "fit" into the table cell?

Now look at this "transitional" page:
http://www.digitolle.net/google/hotboxmodelactiontrans.htm

Notice how the text box does fit?

The goal is to set a table to a size and set its columns to specific sizes
(either percentages or pixel widths) and have a textbox perfectly fill the
available area within a table cell. This way, I can have 25 fields in the
table and, if I need to adjust the width of the table, the objects within
the cells adjust accordingly.

I don't want a table that adjusts to its contents, I want contents that
adjust to its parent container (the cell and the table.)


Tony

unread,
Apr 17, 2006, 6:20:45 PM4/17/06
to
Shadow Lynx wrote:
> From: "Tony" <ton...@dslextreme.WHATISTHIS.com>
>
>>I honestly must be missing something, because I have never had a problem
>>with what I percieve you are trying to do.
>
> There's no perception about it. See this "strict" page:
> http://www.digitolle.net/google/hotboxmodelaction.htm

What makes you think that by looking at it again, I'll suddenly see
something I didn't see before?

I've offered some thoughts. None of them were satisfactory to you. They
all were ideas that worked for me to address the issue I THOUGHT you
were trying to address.

You see your problem one way, I don't see it the same way. But
apparantly that, as my suggestions, is unacceptable to you.

I strongly suspect that nothing I can offer will be acceptable. What I
NOW "perceive" is that you are probably a troll bent on arguing, rather
than someone who has a real problem they want to solve.

Shadow Lynx

unread,
Apr 18, 2006, 2:03:56 AM4/18/06
to
"Tony" <ton...@dslextreme.WHATISTHIS.com> wrote in message
news:1248526...@corp.supernews.com...

Tony, I do appreciate your thoughts and I really am not trying to argue
here. I think I have stated my issue very clearly and I don't understand
how I can make it any more specific or nail it down any harder. I also do
not see how this is not a "real problem." The point of it all is that it
was once a very simple process with the MSIE box model and now I'm trying to
determine how to accomplish the same thing with the W3C's box model. From
everything I've been told, it's simply impossible - is that correct or not?

> A couple thoughts occur to me: first, unless I'm understanding something
> totally wrong, aren't your cells a fixed pixel width? If so, then you can
> also give a fixed pixel width for the textbox. Alternately, place the
> textbox inside a div (width:auto) and then set the textbox to 100% - it
> should fit to the width of the div (untested!)

Thanks for the idea (I did get kind of excited at the thought of it working)
but it doesn't work. I've updated the demo page to include a cell
containing a div containing a text box:
http://www.digitolle.net/google/hotboxmodelaction.htm

> Another thought is to leave the table width alone and control the width by
> setting the textbox width - the TD will adjust to the contents then.

The idea is to manipulate the width of a row and then all of the textboxes
will adjust accordingly (having the parent object enforce width is far more
convenient and logical). That's the concept of 100% width, which no longer
works with the Strict box model. The entire impetus for this whole thread
is to find out how to get around this very issue.


Tony

unread,
Apr 18, 2006, 2:46:15 PM4/18/06
to
Shadow Lynx wrote:

>>Another thought is to leave the table width alone and control the width by
>>setting the textbox width - the TD will adjust to the contents then.
>
> The idea is to manipulate the width of a row and then all of the textboxes
> will adjust accordingly (having the parent object enforce width is far more
> convenient and logical). That's the concept of 100% width, which no longer
> works with the Strict box model. The entire impetus for this whole thread
> is to find out how to get around this very issue.

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.

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)

Shadow Lynx

unread,
Apr 19, 2006, 1:22:54 PM4/19/06
to
"Tony" <ton...@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;


0 new messages