Welcome to WebmasterWorld Guest from 107.20.5.156

Forum Moderators: not2easy

Message Too Old, No Replies

Fluid thumb gallery, breaks in Safari

     

flyerguy

4:03 pm on Oct 9, 2008 (gmt 0)

10+ Year Member



Hi,

I found a thumbnail gallery CSS scheme that seemed to work pretty well, until I saw our gallery in Safari. In IE and FF, it displays the thumbs in a grid as expected, however in Safari it just puts each thumb under the previous: as in, desired effect = grid of thumbs, actual effect = vertical column of thumbs

The code:


<style>.album{
width:100%;
padding: 10px;
float:left
}
.album .imageSingle {
float: left;
margin: 5px;
width:126px;
text-align:center;
border:1px #CCC dotted;
}
.album .imageSingle .image {
width:105px;
height:103px;
margin:3px;
line-height:100px;
}
.album .footer {
text-align:center;
width: 126px;
border-top:1px #CCC dotted;
color:#999;
font-weight:bold;
padding-top: 7px;
padding-bottom:7px;
margin-top: 10px;
}</style>
<div class="album">
(Programmatically repeated thumbs content here)
<div class="imageSingle">
<div class="image"><img src="http://www.mysite.com/images/image1.jpg" style='border: 1px #CCC solid;vertical-align:middle;' onmouseover="showtrail(350,350,'http://mysite.com/images/image1-big.jpg');" onmouseout="hidetrail();" /></a></div>
</div>
(End programmatically repeated thumbs)
</div>
<div style="clear:both"></div>

Can anyone say why Safari in particular would not like this arrangement, or suggest a more robust CSS grid/gallery?

Thanks!

flyerguy

4:47 pm on Oct 9, 2008 (gmt 0)

10+ Year Member



Never mind, moving the CSS styles into our core CSS files instead of inlining it has solved the problem! :)