All,

I have to create a thumbnail page complete with a left sidebar and floated thumbnails.

Key things to keep in mind:

1) the page is not fixed width. This page is to resize according to the browser window...ie. the number of thumbnails per row will change depending on browser size.

2) the thumbnail images are of different heights. I cannot simply apply a universal padding or margin to the thumb image because we have horizontally and vertically orientated images.

Now, I am having issues with the thumbnails in Safari 1.0.3 and Netscape 7.1/Mac. It appears to be a conflict between the floating of the thumbs, and the absolute positioning I'm using to make the content in the thubnails align to the bottom.

Here's the code and CSS:

HTML:
<div id="container">
<div id="sidebar">
</div>
<div id="thumbContainer">
<div class="slide">
<div class="positioner">
<img src="connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
<div class="slide">
<div class="positioner">
<img src="/connoisseur/bob979fm/images/onairdefault.gif" />
<p>Test Text</p>
</div>
</div>
</div>
</div>


CSS:
#sidebar {
width: 150px;
height: 300px;
background-color:#CCC;
float: left;
}
#thumbContainer {
margin-left: 160px;
}
.slide {
width: 150px;
height: 200px;
background-color: #999;
margin: 0px 10px 10px 0px;
position: relative;
float: left;
}
.positioner {
width: 150px;
text-align: center;
position: absolute;
bottom: 0px;
}
p {
margin: 0px;
}


You can also view the page here: http://www.chadodonnell.com/thumbTest.html.

I know that this works fine in FF/PC, IE 6/PC, FF/Mac, Net 7.2/Mac, and it even partially works in IE5/Mac. Unfortunatly, I have to have this work in Safari 1.0.3 and Net 7.1/Mac.

Is there anything I'm missing that is causing the errors in these two browsers? I know that the position: absolute is probably the culprit, but I don't know what else to do, short of making each thumbnail it's own table, to get the thumb content to bottom align (which, unfortunately, is manditory for this job).

Any help is greatly appreciated.