title: css <li> overlapping in chrome onload
body: <p>I am using the following plugin, <a href="http://www.wookmark.com/jquery-plugin" rel="nofollow">http://www.wookmark.com/jquery-plugin</a>, on some li elements on my page. My li elements, unlike the ones in the demo, don't have a fixed height from the start. The js for the page load is:</p>
  
  <pre><code> $(function() {
        $("#preview-grid li").wookmark({offset: 5});
   });
   $(window).resize(function() {
        $("#preview-grid li").wookmark({offset: 5});
   });
  </code></pre>
  
  <p>When I first load the page in Chrome, my li elements overlap each other in each column (i.e. the widths of each column are obeyed, but within each column, the li elements overlap vertically to varying degrees). But as soon as I execute <code>$("#preview-grid li").wookmark({offset: 5});</code> on the console after the page has been loaded, the li elements un-overlap themselves. </p>
  
  <p>What is the reason for this initial overlapping of my li elements? How does re-executing that line after the page has loaded change anything, considering I originally only executed that after the DOM was loaded. </p>
  
  <p>NOTE: This only happens in Chrome (version 13). Firefox/Safari work as expected. </p>