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
1  2571 
"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/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Dr.Tube |
last post by:
Hi there,
I have this web site (www.DrTube.com) which has the following DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
which switches...
|
by: Glabbeek |
last post by:
I'm changing the layout of my site. Instead of using tables, I will use
DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not
the correct width. Mozilla and Opera are showing the...
|
by: Charles Blaquière |
last post by:
As part of my explorations in liquid design, I'm exploring ways to use the
overflow: hidden property -- when browser windows become too narrow, I want
(some) images to get cropped rather than have...
|
by: developer |
last post by:
Does anyone know what is the way IE treats span tags(<span>) and table
tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if
it placed with other elements that are in a table? Can...
|
by: Jim Cobban |
last post by:
I have a set of web pages that are organized in pairs. One of each pair
contains a graphic and the other is an extended description of the graphic.
I am trying to set it up that selecting a single...
|
by: expertware |
last post by:
Ok! to avoid confusion I will start a new argument.
Thanks!!
FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT
===============================================================...
|
by: Dr John Stockton |
last post by:
Page part <URL:http://www.merlyn.demon.co.uk/js-index.htm#BC> works in
IE4 but not in IE6. IE6 says "invalid argument, apparently referring to
the "var Wid" line in the javascript section below.
...
|
by: IframeLearner |
last post by:
Hi ,
I am trying to upload a file from a parent.jsp using Iframes.
From Parent page. I have to save Subject, Desc, File and file name. to upload the file i am using Iframe. I want the...
|
by: montybytes |
last post by:
Hi there,
Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well.
I have a JavaScript function which retrieves...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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...
|
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...
|
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,...
| | |
