Since your css states: "margin: 20px auto;", see what
window.getComputedStyle(test, null).getPropertyValue("margin-top") or
window.getComputedStyle(test, null).getPropertyValue("margin-bottom")
returns;)SHELDON NEILSON Manager: Systems Development Equidem Management Sciences (Pty) Ltd, 2nd Floor, Lancaster Gate, Hyde Park Lane, Hyde Park, Sandton, 2196 Mobile: +27 71 895 0326, Tel: +27 11 325 1960, BB Pin: 22056627, Email: <mailto:[email protected]> [email protected]. A member of <http://www.webenpartners.com/> Weben Partners Equidem Management Sciences Electronic Mail Disclaimer This message (including any attachments) is intended solely for theperson(s) to whom it is addressed ("intended recipient"). It may contain copyright, confidential and/or privileged information, within the meaning of applicable law. If you are not the intended recipient (or do not have authority to access the intended recipient's mail box) any disclosure, dissemination, distribution or copying of this e-mail or any attached documents is strictly prohibited. If you are not the intended recipient, please contact the sender or Equidem Management Sciences (the "Company") as soon as possible and delete this e-mail and all attachments immediately. Information, opinions or statements in this e-mail are not necessarily those of the Company. If you are in any doubt as to whether the opinions or statements in this e-mail are made on behalf of the Company, please contact: <mailto:[email protected]> [email protected]. Equidem Management Sciences does not accept liability for any claims, loss or damages of whatsoever nature, arising as a result of the reliance on such information, opinions or statements by anyone. From: [email protected] [mailto:[email protected]] On Behalf Of Joel Dart Sent: 16 May 2011 04:27 PM To: [email protected] Subject: RE: [JSMentors] Re: getComputedStyle and marginLeft when auto 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: > <http://www.w3.org/TR/CSS21/box.html#propdef-margin-left> 'margin-left' + <http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width> 'border-left-width' + <http://www.w3.org/TR/CSS21/box.html#propdef-padding-left> 'padding-left' + <http://www.w3.org/TR/CSS21/visudet.html#propdef-width> 'width' + <http://www.w3.org/TR/CSS21/box.html#propdef-padding-right> 'padding-right' + <http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width> 'border-right-width' + <http://www.w3.org/TR/CSS21/box.html#propdef-margin-right> '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] -- 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] -- 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] -- 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]
