How do I make this disappearing/reappearing AJAX loading GIF stop moving other elements?

http://schnell.dreamhosters.com/randroll.php

Each time you hit 'Roll!', a gif appe开发者_StackOverflow社区ars, stays for a little bit, then disappears. It works exactly as it should, except when the gif appears it moves everything below it and then when it disappears everything moves back. Is there a way to make this gif come and go without it moving stuff like that? And without using something like absolute positioning?

---

You would use absolute positioning to remove it from the normal flow of elements so it doesn't exhibit this behavior. It is the Right Tool For The Job™.

---

Why would you not use position:absolute? By intuition it should feel as something that is on top of your normal content.

A workaround could be to use negative margin. If your image is 40px high, you can use a margin-bottom of -40px. I would not recommend this strategy over position:absolute.

EDIT: woops, someone beat me to it.

---

Yes, you want to use absolute positioning. This will get you most of the way there:

<img id="loader" style="position: absolute; display: none; left: 50%; margin-left: -110px;" src="img/ajax-loader.gif">

I'd recommend avoiding using inline CSS and JavaScript, as well as HTML elements like <center> (you should use CSS for that). The CSS rule for this particular element would be

#loader {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -110px; 
}

---

Just get rid of the <br>s and put the gif in a container with a static height:

<button>Roll!</button>
<div style="height:20px"><img id="loader" src="img/ajax-loader.gif" /></div>

Use extra CSS to adjust the margins to taste.

---

You can give the gif a negative bottom margin, equal to its height. So, assuming it is 30px high

#myGif {
    margin-bottom: -30px;
}

---

Thanks for the help, but I managed to find own solution and I think it works even better than my original idea. You can go back to the page and see it in action, but if you're curious, here's what I did. I basically just added...

<style type="text/css">
    .load {
        background-image: url('img/ajax-loader2.gif');
        background-repeat: no-repeat;
        background-position: bottom right; 
    }

    #printout {
        border: 1px black dotted;
        font-size: 12pt;
        text-align: left;
        padding: 10px;
        height: 100px;
        width: 400px;
    }
</style>

And then...

$("button").click(function () {
            var v = $("select").attr("value");
            --> $("#printout").addClass("load"); <--
            $.get("randloot.php", { "table" : v }, function(data) {
                --> $("#printout").removeClass(); <--
                if(data.roll != 0) {    
                    $('#printout').text("Roll - " + data.roll +
                                        "\nArmor - " + data.armor +
                                        "\nPrice - " + data.price + "gp");
                }
                else
                    $('#printout').text("Oops");
            }, "json");
        });

And I think the end result is elegant and unobtrusive. Maybe a few more lines than some of the other solutions mentioned, but this can be applied to many more situations with minimal adjustment.