473,241 Members | 1,615 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

Inherit keyword and computed values for position offset

Hello fellow comp.infosystems.www.authoring.stylesheets colleagues,

Imagine this situation:

#grand-parent-abs-pos
{
height: 400px;
position: absolute;
width: 600px;
}

#parent-abs-pos
{
height: 0px;
left: 50%; /* 50% x 600px == 300px */
position: absolute;
top: 25%; /* 25% x 400px == 100px */
width: 0px;
}

#green-child-abs-pos-inherit
{
background-color: green;
left: inherit;
position: absolute;
top: inherit;
height: 100px;
width: 100px;
}

My questions:
1- What should be the computed left offset value of the #green-child-
abs-pos-inherit?

2- Should it inherit "left: 50%" or "left: 300px"?

3- In other words, should it inherit the parent's *specified* left
offset value (50%) or the parent's *computed* left offset value
(300px)?

Testcase:
http://www.gtalbot.org/BrowserBugsSe...-position.html

I read carefully
Section 6.1.2 Computed value
http://www.w3.org/TR/CSS21/cascade.html#computed-value

Section 6.2 Inheritance
http://www.w3.org/TR/CSS21/cascade.html#inheritance

Section 6.2.1 The 'inherit' value
http://www.w3.org/TR/CSS21/cascade.h...ue-def-inherit

and I also carefully read
Bug 117887: elements inherit specified positioning property values
instead of computed values (computed style)
https://bugzilla.mozilla.org/show_bug.cgi?id=117887

Regards, Gérard
Nov 15 '08 #1
2 3854
On 2008-11-15, GTalbot <ne*******@gtalbot.orgwrote:
Hello fellow comp.infosystems.www.authoring.stylesheets colleagues,

Imagine this situation:

#grand-parent-abs-pos
{
height: 400px;
position: absolute;
width: 600px;
}

#parent-abs-pos
{
height: 0px;
left: 50%; /* 50% x 600px == 300px */
position: absolute;
top: 25%; /* 25% x 400px == 100px */
width: 0px;
}

#green-child-abs-pos-inherit
{
background-color: green;
left: inherit;
position: absolute;
top: inherit;
height: 100px;
width: 100px;
}

My questions:
1- What should be the computed left offset value of the #green-child-
abs-pos-inherit?

2- Should it inherit "left: 50%" or "left: 300px"?
It should inherit 50% (i.e. be 50% of *its* container).
3- In other words, should it inherit the parent's *specified* left
offset value (50%) or the parent's *computed* left offset value
(300px)?
The computed value is 50%. The *used* value is what's 300px. It inherits
the computed value.

See CSS 2.1 9.3.2:

Computed value: [...] if specified as a length, the corresponding
absolute length; if specified as a percentage, the specified value;
otherwise, 'auto'.

See 6.1 for the definitions of specified, computed and used values.

(There is much confusion here when it comes to the DOM getComputedStyle
method. The DOM spec says it means "computed" as per CSS2 but as far as
I remember CSS2 [as opposed to 2.1] didn't distinguish properly between
computed and used. In many browsers getComputedStyle returns used values
for some things but they seem to be moving towards returning more
computed values in newer releases.)
Nov 15 '08 #2
On Nov 15, 2:48*pm, Ben C <spams...@spam.eggswrote:
On 2008-11-15, GTalbot <newsgr...@gtalbot.orgwrote:
2- Should it inherit "left: 50%" or "left: 300px"?

It should inherit 50% (i.e. be 50% of *its* container).
3- In other words, should it inherit the parent's *specified* left
offset value (50%) or the parent's *computed* left offset value
(300px)?

The computed value is 50%. The *used* value is what's 300px. It inherits
the computed value.

See CSS 2.1 9.3.2:

* * Computed value: [...] if specified as a length, the corresponding
* * absolute length; if specified as a percentage, the specified value;
* * otherwise, 'auto'.
Ben, you nab the bit of info what I was trying to find. Computed value
will be percentage if parent property is specified with a percentage.

See 6.1 for the definitions of specified, computed and used values.

(There is much confusion here when it comes to the DOM getComputedStyle
method. The DOM spec says it means "computed" as per CSS2 but as far as
I remember CSS2 [as opposed to 2.1] didn't distinguish properly between
computed and used. In many browsers getComputedStyle returns used values
for some things but they seem to be moving towards returning more
computed values in newer releases.)
Yes. The IE 8 developer tool will return "50%" in such case and not
the used 300px value.

Thank you very much for your assistance here, Ben. Again, this is very
much appreciated :)

Regards, Gérard
Nov 15 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Fabian Neumann | last post by:
Hi! I got a problem with font-family inheritance. Let's say I have CSS definitions like: p { font:normal 10pt Verdana; } strong { font:normal 14pt inherit;
9
by: DMAC | last post by:
If i want to split a computed column into two or more columns based on the the length (its a varchar) of the computed column, how often will sql server determine what the computed column is?...
13
by: Dave win | last post by:
howdy.... plz take a look at the following codes, and tell me the reason. 1 #define swap(a,b) a=a^b;b=b^a;a=a^b 2 3 int main(void){ 4 register int a=4; 5 register int b=5;...
9
by: userblue | last post by:
Hi Does anyone know if there is a way to define what is effectively a single globally visible, enumerated list whilst actually defining the entries across several different modules? or somehow do...
0
by: Beemer Biker | last post by:
I finally discoved why controls are not getting pasted into my multiview "view". The position attribute (absolute, normal, offset) is being set to absolute. I assume this is a "feature" of the...
19
by: zzw8206262001 | last post by:
Hi,I find a way to make javescript more like c++ or pyhon There is the sample code: function Father(self) //every contructor may have "self" argument { self=self?self:this; ...
7
by: Aamir Mahmood | last post by:
Hi All I have DataTable object. Is there a way that I can know which fields (columns) in the table are computed. Apparantly the DataTable.Columns returns all columns both computed and other....
29
by: Chris Riesbeck | last post by:
I have an image with a class and the class defines a clip rectangle. In Firefox 2 and 3, and Opera 9, I can access the rectangle with document.defaultView.getComputedStyle(). But that doesn't...
30
by: mmgarvey | last post by:
Hi, I'm using python to develop some proof-of-concept code for a cryptographic application. My code makes extended use of python's native bignum capabilities. In many cryptographic...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.