homepage Welcome to WebmasterWorld Guest from 54.145.252.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Fluid thumb gallery, breaks in Safari
flyerguy

10+ Year Member



 
Msg#: 3762184 posted 4:03 pm on Oct 9, 2008 (gmt 0)

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

10+ Year Member



 
Msg#: 3762184 posted 4:47 pm on Oct 9, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved