I'm thinking of redoing my homepage again and thought to use Isotope to make it spiffier. I've experimented with Isotope in the past and was frustrated by not being able to make it work like I wanted. This time I'm trying to do something simpler. I made a super simple example to illustrate my latest issue. Images do not show in Safari and some other browsers unless you resize the browser window.
Below is a sample of my code, the divs are written to the screen with PHP. I might switch to UL and LI but since the HTML is there just not being displayed until the browser window is resized... Is there some JavaScript force redraw/reload I should be doing, there was nothing about that in the Isotope documentation that I've encountered and the demos work in Safari on my MacBook Pro.
I tried a few other browsers, it works as designed in IE8, but Firefox on my work machine seems to react the same as Safari.
<div id="contents">
<h1>Making the Internet better since 1995</h1>
<!-- Masonry test code -->
<div id="container">
<div class="item"><a href="http://www.flickr.com/photos/mminghella71/9440123324/in/pool-341554@N24" title="Bolt Action Heer Infantry Squad"><img src="http://farm6.staticflickr.com/5333/9440123324_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></a></div>
</div>
<script>
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>