title: CSS styling JPlayer elements that are created by jQuery
body: <p>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).</p>
  
  <p>What am I missing?</p>
  
  <p>Thanks for your help!</p>
  
  <p>P.S.- the elements I'm trying to edit are added to the page via JavaScript</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/danielredwood/MmvJX/1/" rel="nofollow">http://jsfiddle.net/danielredwood/MmvJX/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="jquery_jplayer_2" class="jp-jplayer"&gt;&lt;/div&gt;
  
      &lt;div class="jp-audio"&gt;
          &lt;div class="jp-type-playlist"&gt;
              &lt;div id="jp_interface_2" class="jp-interface"&gt;
                  &lt;ul class="jp-controls"&gt;
                      &lt;li&gt;&lt;a href="#" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="jp-stop" tabindex="1"&gt;stop&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="jp-previous" tabindex="1"&gt;previous&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="jp-next" tabindex="1"&gt;next&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="jp-progress"&gt;
                      &lt;div class="jp-seek-bar"&gt;
                          &lt;div class="jp-play-bar"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="jp-current-time"&gt;&lt;/div&gt;
                  &lt;div class="jp-duration"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="jp_playlist_2" class="jp-playlist"&gt;
                  &lt;ul&gt;
                      &lt;!-- The method Playlist.displayPlaylist() uses this unordered list --&gt;
                      &lt;li&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>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);
  
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>//&lt;![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 &lt; this.playlist.length; i++) {
                  var listItem = (i === this.playlist.length-1) ? "&lt;li class='jp-playlist-last'&gt;" : "&lt;li&gt;";
                  listItem += "&lt;a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'&gt;"+ this.playlist[i].name +"&lt;/a&gt;";
  
                  // 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 &lt; this.playlist.length) ? this.current + 1 : 0;
              this.playlistChange(index);
          },
          playlistPrev: function() {
              var index = (this.current - 1 &gt;= 0) ? this.current - 1 : this.playlist.length - 1;
              this.playlistChange(index);
          }
      };
  
      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"
      });
  });
  //]]&gt;
  </code></pre>