By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,626 Members | 1,182 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,626 IT Pros & Developers. It's quick & easy.

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

P: n/a
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 #1
Share this Question
Share on Google+
50 Replies


P: n/a
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.
Mar 29 '06 #2

P: n/a
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.ht...o-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/BrowserBugsSe...gColWidth.html

Gérard
--
remove blah to email me
Mar 29 '06 #3

P: n/a
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.

Mar 30 '06 #4

P: n/a
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
--
remove blah to email me
Mar 31 '06 #5

P: n/a
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...hancements.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.

Mar 31 '06 #6

P: n/a
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

Apr 1 '06 #7

P: n/a
pe********************@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
Apr 1 '06 #8

P: n/a
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.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Apr 1 '06 #9

P: n/a
pe********************@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.

Gérard
--
remove blah to email me
Apr 2 '06 #10

P: n/a
Transitional is exactly what I'm trying to get away from.

Apr 3 '06 #11

P: n/a
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%?

Apr 3 '06 #12

P: n/a
Gérard, do you have a reply to my Fri, Mar 31 2006 1:13 am post?

Apr 3 '06 #13

P: n/a
In article <11**********************@i40g2000cwc.googlegroups .com>,
"Shadow Lynx" <sh**********@yahoo.com> wrote:
While it would work for DIV (as I noted in a previous post)


No offense but:

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

leo

--
<http://web0.greatbasin.net/~leo/>
Apr 3 '06 #14

P: n/a
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).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Apr 3 '06 #15

P: n/a
VK

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>
;-)

Apr 3 '06 #16

P: n/a
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?

Apr 4 '06 #17

P: n/a
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.

David Dorward wrote:
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).

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


Apr 4 '06 #18

P: n/a
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.
Apr 4 '06 #19

P: n/a
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
Apr 4 '06 #20

P: n/a
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...hancements.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" <to****@dslextreme.WHATISTHIS.com> wrote in message
news:12*************@corp.supernews.com...
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.

Apr 4 '06 #21

P: n/a
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.

--
-bts
-Warning: I brake for lawn deer
Apr 4 '06 #22

P: n/a
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!!!

Apr 4 '06 #23

P: n/a
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...hancements.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.
Apr 4 '06 #24

P: n/a
Shadow Lynx wrote:
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!!!


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.
Apr 4 '06 #25

P: n/a
> 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.
Apr 5 '06 #26

P: n/a
"Tony" <to****@dslextreme.WHATISTHIS.com> wrote in message
news:12*************@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...hancements.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?
Apr 5 '06 #27

P: n/a
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.
Apr 5 '06 #28

P: n/a
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....ec5fd9a15c3ebc
(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?

Apr 6 '06 #29

P: n/a
In article <11**********************@i39g2000cwa.googlegroups .com>,
"Trevor L." <ta****@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/>
Apr 6 '06 #30

P: n/a
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/

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Apr 6 '06 #31

P: n/a
"Trevor L." <ta****@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....ec5fd9a15c3ebc
(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.)
Apr 7 '06 #32

P: n/a
"Tony" <to****@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
Apr 7 '06 #33

P: n/a
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>

--
-bts
-Warning: I brake for lawn deer
Apr 7 '06 #34

P: n/a
> Shadow Lynx wrote:
Wow, I didn't realize that propegation could be so slow and out of
synch.
"Beauregard T. Shagnasty" <a.*********@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!]
Apr 7 '06 #35

P: n/a
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.*********@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.

--
-bts
-Warning: I brake for lawn deer
Apr 8 '06 #36

P: n/a
On 2006-04-06, Trevor L. <ta****@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....ec5fd9a15c3ebc
(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
Apr 8 '06 #37

P: n/a
VK

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>

Apr 8 '06 #38

P: n/a
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.
Apr 10 '06 #39

P: n/a
"Beauregard T. Shagnasty" <a.*********@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...hancements.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;
Apr 13 '06 #40

P: n/a
"VK" <sc**********@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?
Apr 13 '06 #41

P: n/a
"Tony" <to****@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.
Apr 13 '06 #42

P: n/a
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>

--
-bts
-Warning: I brake for lawn deer
Apr 13 '06 #43

P: n/a
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.
Apr 13 '06 #44

P: n/a
VK

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.

Apr 14 '06 #45

P: n/a

"Shadow Lynx" <sh**********@yahoo.com> wrote in message
news:74***************************@FOXVALLEY.NET.. .
"Tony" <to****@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
Apr 16 '06 #46

P: n/a
From: "Tony" <to****@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/hotb...ctiontrans.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.)
Apr 17 '06 #47

P: n/a
Shadow Lynx wrote:
From: "Tony" <to****@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.
Apr 17 '06 #48

P: n/a
"Tony" <to****@dslextreme.WHATISTHIS.com> wrote in message
news:12************@corp.supernews.com...
Shadow Lynx wrote:
From: "Tony" <to****@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.


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.
Apr 18 '06 #49

P: n/a
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)
Apr 18 '06 #50

50 Replies

This discussion thread is closed

Replies have been disabled for this discussion.