[jQuery] styling in javascript block vs .css file

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">

</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">

</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