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



"Tony" <tony23@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in message
news:12358sbpggug3a8@xxxxxxxxxxxxxxxxxxxxx
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.


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.

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?


.