CSS styling JPlayer elements that are created by jQuery

I'm styling an instance of JPlayer (HTML5 audio/video player) and have run into a weird little snafu. I'm calling an element out by it's ID to set some attributes (width, height, background) but am not seeing the correct result. I'm definitely missing something! Instead of seeing the appropriate 100x100px thumbnail with bg image, the background image only shows behind the link within the element.. so it appears to be 60x20px (ish).

What am I missing?

Thanks for your help!

P.S.- the elements I'm trying to edit are added to the page via JavaScript

jsFiddle: http://jsfiddle.net/danielredwood/MmvJX/1/

HTML:

<div id="container">
    <div id="jquery_jplayer_2" class="jp-jplayer"></div>

    <div class="jp-audio">
        <div class="jp-type-playlist">
            <div id="jp_interface_2" class="jp-interface">
                <ul class="jp-controls">
                    <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                    <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                    <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                    <li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
                    <li><a href="#" class="jp-next" tabindex="1">next</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
            </div>
            <div id="jp_playlist_2" class="jp-playlist">
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

CSS:

li {
    list-style-type: none;
    float:left;
}
#jp_playlist_2_item_0 {
    width:100px;
    height:100px;
    background:url(http://a4.mzstatic.com/us/r2000/011/Music/f1/98/7f/mzi.qlkzqpmu.100x100-75.jpg);

}

JavaScript:

//<![CDATA[
$(document).ready(function(){

    var Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        $.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        $(this.cssSelector.jPlayer).jPlayer(this.options);

        $(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            $(this).blur();
            return false;
        });

        $(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            $(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            $(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Associate playlist items with their media
                $(this.cssSelector.playlist + " ul").append(listItem);
                $(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = $(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        $(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $(this).blur();
                    return false;
                });

            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            $(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index)开发者_如何学JAVA;
        }
    };

    var audioPlaylist = new Playlist("2", [
        {
            name:"Paparazzi",
            mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.mp3",
            oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.ogg",
            wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.wav"
        },
        {
            name:"Dance In The Dark",
            mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.mp3",
            oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.ogg",
            wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.wav"
        },
        {
            name:"Born This Way",
            mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.mp3",
            oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.ogg",
            wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.wav"
        }

    ], {
        ready: function() {
            audioPlaylist.displayPlaylist();
            audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
        },
        ended: function() {
            audioPlaylist.playlistNext();
        },
        play: function() {
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "../js",
        supplied: "oga, mp3"
    });
});
//]]>

Your CSS isn't working because you aren't styling the elements correctly; height and width properties don't apply to inline elements, which is why the background isn't working properly. Here's a fix:

#jp_playlist_2_item_0 {
    display: block;

I'm not sure what else the problem is, so here's a working demo: http://jsfiddle.net/sE4mZ/