CSS Drive forums | Centered Thumbnail Gallery Problem

Centered Thumbnail Gallery Problem

Posted: 01 October 2006 10:08 AM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2006-10-01

I’ve recently making some changes on my photography webportal
I’ve search the net for some tips on how to put shadows and use a centered gallery all with css.

I’ve came up with this:

* html .thumb {float:none;display:inline;}
.thumb { float:left; background: url(images/shadowAlpha.png) no-repeat bottom right !important; background: url(images/shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 10px 10px 10px; }
.thumb img { display: block; position: relative; background-color: #FFF; border: 1px solid #CCC; margin: -6px 6px 4px -6px; padding: 4px; }
.thumb {display:inline; vertical-align:middle; display:inline-block;}
.thumb {display:inline-table;}
.thumb > a, .thumb > div {display:table-row;} 

The problem is that in IE is shows very well as you can see
http://www.acores.net/canalacores/fotos2.php?gallery=1

But in Mozilla it messes with all, does anyone have a solution for that ?

Regards

Profile

xcrap

Posted: 03 October 2006 01:55 AM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 2

Joined 2006-10-01

I’ve improved a little bit the css, it’s better in mozilla but still not centering the gallery :\

* html .thumb, * html .thumb2 {float:none;display:inline;}
.thumb { float:left; background: url(../images/shadowAlpha.png) no-repeat bottom right !important; background: url(../images/shadow.gif) no-repeat bottom right; margin: 10px 10px 10px 10px; }
.thumb img { display: block; position: relative; background-color: #FFF; border: 1px solid #CCC; margin: -6px 6px 4px -6px; padding: 4px; }
.thumb {display:inline; vertical-align:middle; display:inline-block;}
.thumb {display:inline-table;}
.thumb > a, .thumb > div {display:table-row;}

.gallery { background-color:#FFF;text-align:center; padding:5px; }
.gallery a { text-decoration:none; color:#666; }
.gallery a:hover { text-decoration:underline; } 

<div class="gallery">
<div class="thumb"><a href="#" title="#'"><img src="images/something.php" /></a></div>
</div> 

Online Example updated here: http://www.acores.net/canalacores/fotos2.php?gallery=1

Profile

NYK_Adam

Posted: 14 June 2007 02:56 PM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 3

Joined 2007-06-14

you might put each picture in a

<p>

with a class and then set that to


.class p {text-align:center;}

I know that’s how I got my gallery to center

Profile

‹‹ IE Right Sidebar Problems IE problem ››