This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > April 2006 > DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?
|
|
| Shadow Lynx 2006-03-28, 6:47 pm |
| 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!
| |
| Shadow Lynx 2006-03-30, 6:56 pm |
| 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.
| |
| Shadow Lynx 2006-03-31, 3:57 am |
| G=E9rard, 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/e...nhancements.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 =3D 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 =3D 100% of the parent object's Width
(not clientWidth) PLUS 2px (right/left border) PLUS 10px (right/left
padding) =3D 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.
| |
| pegasusflightresources@gmail.com 2006-04-01, 3:42 am |
| 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 2006-04-01, 3:42 am |
| pegasusflightresources@XXXXXXXXXX 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 2006-04-01, 3:42 am |
| 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
| |
| Shadow Lynx 2006-04-03, 3:40 am |
| Transitional is exactly what I'm trying to get away from.
| |
| Shadow Lynx 2006-04-03, 3:40 am |
| 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 2006-04-03, 3:40 am |
| G=E9rard, do you have a reply to my Fri, Mar 31 2006 1:13 am post?
| |
|
|
| David Dorward 2006-04-03, 3:40 am |
| 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
| |
|
|
| Shadow Lynx 2006-04-03, 10:58 pm |
| 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 2006-04-03, 10:58 pm |
| 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:
>
>
>
> ... 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
| |
| Beauregard T. Shagnasty 2006-04-03, 10:58 pm |
| 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 2006-04-04, 3:47 am |
| 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/e...nhancements.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" <tony23@dslextreme.WHATISTHIS.com> wrote in message
news:1233geurhm01607@corp.supernews.com...
> Shadow Lynx wrote:
>
> Who is Leonard?
>
>
> And I prefer to have some context so I know what the hell people are
> talking about
>
>
> I don't know what Google Groups does, since I don't use it.
>
>
> Plenty, but I doubt you want to hear them.
| |
| Beauregard T. Shagnasty 2006-04-04, 3:47 am |
| 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
| |
| Shadow Lynx 2006-04-04, 6:53 pm |
| OH FOR XXXXS SAKE GET A GOD DAMNED LIFE! If you have time to XXXXX
about how other XXXXing people form their GOD DAMNED SENTANCES then why
don't you just answer the XXXXING question!!!!??? XXXX 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!!!
| |
| Shadow Lynx 2006-04-05, 7:18 pm |
| > 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 2006-04-05, 7:18 pm |
| "Tony" <tony23@dslextreme.WHATISTHIS.com> wrote in message
news:12358sbpggug3a8@corp.supernews.com...
> 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.
>
> 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.
>
>
> 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.
>
>
> 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>
>
>
>
> IE, perhaps, but not X-browser
>
>
> 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?
| |
| Trevor L. 2006-04-06, 4:54 am |
| 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...bec5fd9a15c3ebc
(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 2006-04-06, 4:54 am |
| In article <1144298975.249330.239270@i39g2000cwa.googlegroups.com>,
"Trevor L." <tandcl@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 2006-04-06, 4:54 am |
| Trevor L. wrote:
[color=darkred]
> 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
| |
| Shadow Lynx 2006-04-07, 6:45 pm |
| "Trevor L." <tandcl@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...bec5fd9a15c3ebc
> (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 2006-04-07, 6:45 pm |
| "Tony" <tony23@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 2006-04-07, 6:45 pm |
| 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
| |
| Shadow Lynx 2006-04-07, 6:45 pm |
| > Shadow Lynx wrote:
>
"Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote in message[color=darkred]
> Har! I quite politely told you that very fact four days ago, and you
> told me to "GET A GOD DAMNED LIFE". <lol>
[color=darkred]
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 2006-04-08, 3:41 am |
| Shadow Lynx wrote:
>
> "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote
>
>
> 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
| |
| Jasen Betts 2006-04-08, 6:49 am |
| On 2006-04-06, Trevor L. <tandcl@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...bec5fd9a15c3ebc
> (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
| |
|
|
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>
| |
| Shadow Lynx 2006-04-13, 7:01 pm |
| "Beauregard T. Shagnasty" <a.nony.mous@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/e...nhancements.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 2006-04-13, 7:01 pm |
| "VK" <schools_ring@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 2006-04-13, 7:01 pm |
| "Tony" <tony23@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 2006-04-13, 7:01 pm |
| 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
| |
|
|
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.
| |
|
|
"Shadow Lynx" <shdwlynxjunk@yahoo.com> wrote in message
news:74d88$443e9dcf$4087c713$11742@FOXVALLEY.NET...[color=darkred]
> "Tony" <tony23@dslextreme.WHATISTHIS.com> wrote:
cell,[color=darkred]
Using -100% helps with DIV but not with TD.
Catherine
| |
| Shadow Lynx 2006-04-17, 6:53 pm |
| From: "Tony" <tony23@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/hot...actiontrans.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.)
| |
| Shadow Lynx 2006-04-18, 6:49 am |
| "Tony" <tony23@dslextreme.WHATISTHIS.com> wrote in message
news:1248526cstdc72@corp.supernews.com...
> Shadow Lynx wrote:
>
> 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.
| |
| Shadow Lynx 2006-04-19, 6:44 pm |
| "Tony" <tony23@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;
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|