[jQuery] styling in javascript block vs .css file

[James]

I was wondering if someone could shed some light on some interesting
behavior I'm running into.

I'm following a very simple jQuery example in order to set up an
activity / busy indicator, as seen in the following page:

http://skfox.com/jqExamples/AjaxActivity.html

There is a simple gif that loads whenever an asynchronous event is
kicked off. (good to go there)

The jQuery code is very straight forward.

// prepare the form when the DOM is ready
$(document).ready(function() {
        // Setup the ajax indicator
        $("body").append('<div id="ajaxBusy"><p><img
src="images/loading.gif"></p></div>');
        $('#ajaxBusy').css({
                display:"none",
                margin:"0px",
                paddingLeft:"0px",
                paddingRight:"0px",
                paddingTop:"0px",
                paddingBottom:"0px",
                position:"absolute",
                right:"3px",
                top:"3px",
                width:"auto"
        });

        // Ajax activity indicator bound
        // to ajax start/stop document events
        $(document).ajaxStart(function(){
                $('#ajaxBusy').show();
        }).ajaxStop(function(){
                $('#ajaxBusy').hide();
        });

  // blah blah

    });
});

I wanted to clean the code up a bit and move the CSS stuff into my
.css file, along with put the actual HTML code ('<div
id="ajaxBusy"><p><img src="images/loading.gif"></p></div>') into my
HTML template.

When I do this, however, the .gif appears on the page wherever I drop
the <div id...> code.

Some questions below.

(a) why does the indicator appear at all if I have the styling in the
.css file and the <div id...> code in the HTML file? The styling ID
indicates that the gif should be hidden.

(b) why does putting the CSS + HTML inside of the Javascript result in
the gif appear in the upper right hand corner (as it should)?

(c) is it good practice to put HTML + CSS in the Javascript block?

I realize that the CSS + HTML is only being appended to the DOM
*after* the DOM has fully loaded when I place the code in the
Javascript block. I don't see, however, how this makes a difference.

Thoughts? Ideas?

-j