Home/ Questions/Q 6054773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:11:26+00:00

I am writing a web page which updates a list using jQuery when something

  • 0

I am writing a web page which updates a list using jQuery when something is selected. Below the list is a button. The update works fine in Firefox and Chrome, but in IE, a bit of space is added between the list and the button every time it updates. Following is a stripped-down example that does the same thing:

<html>
    <head>
        <style type="text/css">
            #list {
                padding: 10;
            }
        </style>

        <script type="text/javascript" src="jquery.js"></script>
    </head>

    <body>
        <div id="test">
            <ul>
                <!-- List -->
                <li>
                    <div id="list">
                        <ul>
                            <li>before 1</li>
                            <li>before 2</li>
                        </ul>
                    </div>
                </li>

                <!-- Button -->
                <li>
                    <div>
                        <button id="button" onClick="reload();">button</button>
                    </div>
                </li>
            </ul>
        </div>
    </body>

    <script type="text/javascript">
    function reload() {
        var html = 
            "<ul>" +
                "<li>after 1</li>" +
                "<li>after 2</li>" +
            "</ul>";

        $("div#list").html(html);
    }
    </script>
</html>

Click the button. In Firefox and Chrome, it stays put. In IE (9), it shifts down a bit (a bit meaning about 10 or 20 pixels. Easily noticeable to the human eye, that is) every time I click it. Can anyone tell me what is causing this?
Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Update
    Seems like the problem is related to IE padding calculating rather than your code, since the same happens using js .innerHtml() directly.

    I would then suggest removing the padding and adding margins to the ul, since it affect the element you are removing maybe also the margins will be removed this time.

    #list {
    padding: 0;
}
#list ul {
    margin:10;
}

    http://jsfiddle.net/qEphF/6/

    According to jQuery docs

    This method uses the browser’s
    innerHTML property. Some browsers may
    not generate a DOM that exactly
    replicates the HTML source provided.

    Maybe you should try a different approach. For example

    $("div#list").empty().append($(html));
    • 0