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:40 0px; table-layout:fixed;">
<colgroup>
<col style="width:50 %;"/ >
<col style="width:50 %;"/ >
</colgroup>
<tr>
<td>
<input type="text" style="width:10 0%;" />
</td>
<td>
<input type="text" style="width:10 0%;" />
</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! 50  6005 
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.
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
misunderstandin g/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
incompatibiliti es 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
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 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
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 misunderstandin g 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.
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
pe************* *******@gmail.c om 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
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 pe************* *******@gmail.c om 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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: N. Demos |
last post by:
The following code renders as intended in IE (A TABLE, with cells of
fixed width and height, inside of a DIV with fixed width and height and
overflow set to hidden.) In Firefox, the table cells assume a narrower
with than specified. If I comment out the width for the DIV, then the
cells render with the correct width and height. Why is this...
|
by: Shadow Lynx |
last post by:
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;">
|
by: metaperl |
last post by:
I work at a place which is currently running SQL 2000, but they are
planning to migrate to 2k5. I was thinking that this is the perfect
opportunity to fix all the weaknesses we have had in our data model for
the longest: primary keys and foreign keys with different names, use of
character columns for boolean fields, use of integer columns for...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
