471,578 Members | 1,262 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,578 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 3750
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Fabian Neumann | last post: by
9 posts views Thread by DMAC | last post: by
13 posts views Thread by Dave win | last post: by
9 posts views Thread by userblue | last post: by
19 posts views Thread by zzw8206262001 | last post: by
7 posts views Thread by Aamir Mahmood | last post: by
29 posts views Thread by Chris Riesbeck | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Vinnie | last post: by
1 post views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

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.