Bug Tracker

#1688 closed bug (fixed)

Opened September 19, 2007 09:25PM UTC

Closed November 19, 2007 05:13PM UTC

Applying margin in .css() causes error in IE7

Reported by: digitalspaghetti Owned by:
Priority: critical Milestone: 1.2.2
Component: core Version: 1.2.1
Keywords: Cc:
Blocked by: Blocking:
Description

From a widget I am creating, I apply CSS using the .css function. In the below snippet, i've commented out the property margin: '0 auto', as it causes an error in jquery.js

$('<li></li>').attr('id', 'question-' + item.id)
.css({
height: '1em',
overflow: 'hidden',
padding: '0',
/*margin: '0 auto',*/
width: '98%',
borderTop: '1px solid #000'
}).appendTo('.widget-list');

The error is in line 732 in jQuery.js, within the curCSS function. It seems to be part of a Dean Edwards hack:

From the awesome hack by Dean Edwards

http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291

If we're not dealing with a regular pixel number

but a number that has a weird ending, we need to convert it to pixels

Attachments (0)
Change History (3)

Changed September 25, 2007 06:33PM UTC by slthytove comment:1

Note: the same error seems to occur when using the .css() method to RETRIEVE a value for margin as well. A workaround in the case of retrieving is only to retrieve the margin-top, margin-right, margin-bottom, and margin-left values instead of the whole margin value.

Changed October 04, 2007 09:29PM UTC by davidserduke comment:2

I'm having trouble reproducing this bug. Here is my code. Did I do something wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Tester</title>
    <style type="text/css">
      #container { background:yellow; }
    </style>
    <script type="text/javascript" src="../../jquery.js"></script>
    <script type="text/javascript">
      function doIt() {
        $("<li></li>").attr('id', 'question-' + 5)
              .css({
                height: '1em',
                overflow: 'hidden',
                padding: '0',
                margin: '0 auto',
                width: '98%',
                borderTop: '1px solid #000'
              })
              .text("here")
              .appendTo('ul');
        $("#adiv").text($("li").css("margin"));
      }

      $(function () {
        $("#doit").click(doIt);
      });
    </script>
  </head>
  <body>
    <button id="doit">Do It</button>
    <div id="container">
      Hi
    </div>
    <ul></ul>
    <div id="adiv"></div>
  </body>
</html>

I tried it in both IE7 and FF2 without a problem.

Changed November 19, 2007 05:13PM UTC by brandon comment:3

resolution: → fixed
status: new → closed

This is working with the latest SVN. http://brandonaaron.net/jquery/tickets/1688/test.html