Whoops yes, sorry got tunnel vision. http://jsfiddle.net/RVpPx/1/ was my
original example, but I changed the math to make it simpler and added the outer
container to also make the results not contingent on browser size. Thanks:
<div id="container">
<div id="test"></div>
</div>
/*css*/
#container{
width: 400px;
}
#test{
width: 200px;
border: 2px solid black;
padding: 0;
margin: 20px auto;
}
/*js*/
var test = document.getElementById("test");
console.log(
window.getComputedStyle(test, null).getPropertyValue("margin-left")
);//prints "0px"
From: [email protected] [mailto:[email protected]] On Behalf
Of Laurie Harper
Sent: Monday, May 16, 2011 10:21 AM
To: [email protected]
Subject: Re: [JSMentors] Re: getComputedStyle and marginLeft when auto
Umm, you're constraining #container but testing #test; was that a mistake in
your sample code?
On 2011-05-16, at 8:59 AM, Joel Dart wrote:
Hey fernando,
I read that part as well, but I think those are more specific cases than the
one I'm dealing with. Take the following example (I defined the width of the
containing block for clarity):
<div id="container">
<div id="test"></div>
</div>
/*css*/
#container{
width: 400px;
border: 2px solid black;
padding: 0;
margin: 20px auto;
}
/*js*/
var test = document.getElementById("test");
console.log(
window.getComputedStyle(test, null).getPropertyValue("margin-left")
);//prints "0px"
>10.3.3 Block-level, non-replaced elements in normal flow
>The following constraints must hold among the used values of the other
>properties:
>'margin-left'<http://www.w3.org/TR/CSS21/box.html#propdef-margin-left> +
>'border-left-width'<http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width>
> + 'padding-left'<http://www.w3.org/TR/CSS21/box.html#propdef-padding-left> +
>'width'<http://www.w3.org/TR/CSS21/visudet.html#propdef-width> +
>'padding-right'<http://www.w3.org/TR/CSS21/box.html#propdef-padding-right> +
>'border-right-width'<http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width>
> +'margin-right'<http://www.w3.org/TR/CSS21/box.html#propdef-margin-right> =
>width of containing
>block<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>
>If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' +
>'padding-right' + 'border-right-width' (plus any of 'margin-left' or
>'margin-right' that are not
>'auto') is larger than the width of the containing block, then any 'auto'
>values for 'margin-left' or 'margin-right' are, for the following rules,
>treated as zero.
But in this case, width is indeed not auto but border-left-width (2px) +
padding-left (0px) + width (200px) + padding-right (0px) + border-right-width
(2px) is not larger than the containing block (400px), so this special case
does not apply. Also, visually you can tell it does not apply because the
margin values are clearly not zero when the block-level element is horizontally
centered.
>If all of the above have a computed value other than 'auto', the values are
>said to be "over-constrained" and one of the used values will have to be
>different from its computed value.
Since margin-left and margin-right are both set as auto, the values are not
over-constrained so this case also does not apply.
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]<mailto:[email protected]>
--
Laurie Harper
http://laurie.holoweb.net/
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]<mailto:[email protected]>
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
