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

What is the parent element of a button (IE6 on Win, transitional mode)?

P: n/a
What is the parent element of a button (IE6 on Win, transitional mode)?

Is it the BODY, the browser default stylesheet, or something else?

Contra "body is parent-element":
- Buttons with no style specified have a different font-size than the body's
font-size.
- If I change the body's font-size, a button with no style specified remains
at the same font-size

Pro "body is parent-element"
- in a button with font-size: 100% specified the font-size _does_ change
with changing of the body's font-size

And strange things (at least for me):
- a button with no style specified has a different font-size than a button
with font-size:100% specified. But they both should inherit their font-size
from a parent (body or browser style-sheet) and show it at that font-size,
not?
- in a button with font-size: 100% specified (as previous section) the
font-size _only_ changes more or less together with the body for font-sizes
in the body of over ~12px or 1em, below that the button's font-size becomes
hardly smaller when the body's font-size is reduced.

So what is the real parent-element of a button, what is the difference
between specifying 100% and specifying nothing and in case the parent is the
browser's style-sheet: can I access it?

Below code used:

<head>
<style>
body
{font-size:5px; /*so small only to demonstrate the effect clearly */
font-family:Arial;
}
</style>
</head>

<body>
<button id="a" >nothing T</button>
<button id="b" style="font-size:100%">perc % T</button> //font in button b
is smaller than in button a, and also different from the body's font
</body>

Paul Gobée
Den Haag/Leiden, NL
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"Paul Gobée" <o.*******@hccnet.nl> wrote:
What is the parent element of a button
It depends on the markup. It's the smallest enclosing element.
In your example, the body element.
(IE6 on Win, transitional mode)?
Doesn't matter. The markup is decisive. Of course, the browser and its
doctype sniffing might be relevant to the question whether the browser
gets things right.
Is it the BODY, the browser default stylesheet, or something else?
What you see is caused by the browser default stylesheet, or its
equivalent. But this has nothing to do with parenting.
Contra "body is parent-element":
- Buttons with no style specified have a different font-size than
the body's font-size.
Apparently IE uses (the equiv. of) a browser stylesheet that sets font
face and size for <button> elements. I'm not sure what it really does.
If I try to imitate it by declaring font-family: ButtonText, it's not
quite the same, and 13px is a little too small, 14px too big to match
the text in the button.

Since the element has those properties set, they are used, no matter
what the parent is.
- If I change the body's font-size, a button with no style
specified remains at the same font-size
Corresponds to the above conclusion.
Pro "body is parent-element"
- in a button with font-size: 100% specified the font-size _does_
change with changing of the body's font-size
When you set font size to 100%, you set it to the font size of the
parent indeed. Here it is very relevant what the parent is.
And strange things (at least for me):
- a button with no style specified has a different font-size than a
button with font-size:100% specified.
Yes, because font-size:100% means 100% of the parent's font size.
It's the same as font-size: inherit, except that in practice IE does
not support the inherit value.
But they both should inherit
their font-size from a parent (body or browser style-sheet) and
show it at that font-size, not?
No, if _any_ applicable style sheet sets the font-size, then there is
no inheritance (except perhaps via that particular setting, which could
explicitly call for inheritance).
- in a button with font-size: 100% specified (as previous section)
the font-size _only_ changes more or less together with the body
for font-sizes in the body of over ~12px or 1em, below that the
button's font-size becomes hardly smaller when the body's font-size
is reduced.
This is a strange phenomenon, a browser oddity.
in case the parent is the browser's style-sheet: can I access it?


The browser stylesheet is nobody's parent; the stylesheet is not an
element at all. But it affects the rendering.

I'm afraid IE's default style sheet is still undocumented. And your
style sheet cannot refer to it, though it can play with it. What would
you like to do? Setting
button { font-size: 100%; }
sounds reasonable to me.

P.S. You do know, I hope, that the implementation of <button> is
fundamentally broken on IE and defective in some other browsers, and
the <input> element has the same functionality more reliably.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.