#653 ✓wont_fix
butz

IE : getStyle(element, property) : returns null for marginTop if undefined

Reported by butz | April 21st, 2009 @ 10:33 AM | in 1.7

When trying to receive the style-value for a.e. 'margin-top' by using $(element).getStyle('marginTop'),

@ IE 5.5, 6.0, 7.0, 8.0: 'null' @ FF 3.0: '0px'

is returned. This is a problem for any calculation afterwards. Why is Prototype not handling this consistently?

Greetings --- Adrian


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<script src="js/prototype.js?v=1" type="text/javascript"></script>
	<title>prototype.js : getStyle() within IE 8</title>
	
	<script type="text/javascript">
	function test(content) {
		content = $(content);
		cntMarginTop = content.getStyle('marginTop');
		alert(cntMarginTop);
	}
	</script>
</head>

<body>
	<div onclick="test(this)">foobar</div>
</body>
</html>

Comments and changes to this ticket

  • Andrew Dupont

    Andrew Dupont May 12th, 2009 @ 06:44 AM

    • Assigned user set to “Andrew Dupont”
    • State changed from “new” to “enhancement”
    • Milestone set to 1.7

    Because we don't normalize between IE's cascaded styles and everyone else's computed styles. We're going to fix all this in 1.7.

  • Victor

    Victor July 7th, 2009 @ 11:47 AM

    Similarly $(element).getStyle("left") will return null in IE6 and IE7 for absolutely positioned elements with left=auto:

    @@@ HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    getStyle for absolutely positioned element


    Event.observe(window,"load",function(){
    var e=$("id1"); alert("Left: "+e.getStyle("left")+"=="+e.offsetLeft); });



    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



    
    This is strange enough, because initially code for getStyle calculates value as 'auto', and then replaces it with null:
    
    if (value == 'auto') {
      if ((style == 'width' || style == 'height') && (element.getStyle('display') != 'none'))
        return element['offset' + style.capitalize()] + 'px';
      return null;
    }
    
    
    If you add additional check for 'left':
    
    if (value == 'auto') {
      if ((style == 'width' || style == 'height' || style == 'left') && (element.getStyle('display') != 'none'))
        return element['offset' + style.capitalize()] + 'px';
      return null;
    }
    
    
    this will work fine.
    
  • Victor

    Victor July 7th, 2009 @ 11:50 AM

    The HTML sample must look like

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>getStyle for absolutely positioned element</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript">
    Event.observe(window,"load",function(){
      var e=$("id1");
      alert("Left: "+e.getStyle("left")+"=="+e.offsetLeft);
    });
    </script>
    </head>
    <body>
    <div id="id1" style="position:absolute; height:220px; top:90px; right:100px; width:100px; background:green; overflow:auto;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    </body>
    </html>
    

    (admin should include preview possibility)

  • Tobie Langel

    Tobie Langel July 23rd, 2009 @ 11:55 PM

    • Tag changed from element, enhancement, ff, getstyle, ie, inconsistently to dom
  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:10 AM

    • Tag changed from dom to section:dom

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    • Assigned user cleared.

    [responsible:none bulk edit command]

  • Andrew Dupont

    Andrew Dupont October 17th, 2010 @ 07:53 AM

    • State changed from “enhancement” to “wont_fix”
    • Importance changed from “” to “Low”

    This is a wontfix because Element#getStyle isn't designed to normalize measurements. The new Element.Layout class was created for this exact purpose.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages