PNG Overlay

PNG Overlay

I'm trying to have jQuery create a div element dynamically and then apply the CSS styles in my style sheet. However, it's not working. If I view the generated source, I see the div element, but my CSS is not applied.

Example 1 is a working version, without jQuery dynamically creating the div element. Example 2 is the code I'm using to add the div.

THX

Example 1
CSS:
.overlay {
   background: transparent url('overlay.png') no-repeat 0 0;
   overflow: hidden;
   position: relative;
   left: -8em;
   margin-right: -8em;
   width: 7em;
   height: 7em;
   float: left;
}
Markup:
<div class="item">
   <h3>Lorem Ipsum</h3>
   <div class="sub-header">
      <dl>
         <dt class="date">Publish Date</dt>
         <dd class="date">July 04, 2008</dd>
      </dl>
   </div>
   <img src="image.png" />
   <div class="overlay"></div>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ipsum. Aenean ornare tristique dolor. Nunc non velit. Nullam tellus. Ut porttitor placerat lectus.</p>
</div>



Example 2
JavaScript:
$('#content .item img').load(
   function() {
      $(this).append('<div class="overlay"></div>');
   }
);

CSS:
.overlay {
   background: transparent url('overlay.png') no-repeat 0 0;
   overflow: hidden;
   position: relative;
   left: -8em;
   margin-right: -8em;
   width: 7em;
   height: 7em;
   float: left;
}
Markup:
<div class="item">
   <h3>Lorem Ipsum</h3>
   <div class="sub-header">
      <dl>
         <dt class="date">Publish Date</dt>
         <dd class="date">July 04, 2008</dd>
      </dl>
   </div>
   <img src="image.png" />
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ipsum. Aenean ornare tristique dolor. Nunc non velit. Nullam tellus. Ut porttitor placerat lectus.</p>
</div>