Bug Tracker

Ticket #1688 (closed bug: fixed)

Opened 1 year ago

Last modified 9 months ago

Applying margin in .css() causes error in IE7

Reported by: digitalspaghetti Assigned to: anonymous
Type: bug Priority: critical
Milestone: 1.2.2 Component: core
Version: 1.2.1 Keywords:
Cc: Needs: Review

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

Change History

Changed 1 year ago by slthytove

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 1 year ago by davidserduke

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 9 months ago by brandon

  • status changed from new to closed
  • resolution set to fixed

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

Note: See TracTickets for help on using tickets.