Help with thumbnails for gallery

Hi, I need to arrange some thumbnails for a gallery, but I'm having some problems.

If I put a border on the active image thumbnail, it changes the layout, so I used outline, it keeps the layout but includes the shadow size.

Here some code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* { padding: 0; margin: 0; border: none; outline: none; }

.container img{
width:50px;
height:50px;
display:inline;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}

.active1{
border: solid 2px #969;
}
.active2{
outline: solid 2px #969;
}

#tn1 {margin:0px;}
#tn2 {margin:-3px 10px -3px -30px ;}
#tn3 {margin:-6px 10px -6px -40px ;}

</style>
</head>

<body>
 <div class="container">
  <img id='tn1' src="thumbnail.jpg" alt="">
 <img id='tn2' class='active1' src="thumbnail.jpg" alt="">
 <img id='tn3' src="thumbnail.jpg" alt="">
 </div>
 <br>
 <br>
 <div class="container">
  <img id='tn1' src="thumbnail.jpg" alt="">
 <img id='tn2' class='active2' src="thumbnail.jpg" alt="">
 <img id='tn3' src="thumbnail.jpg" alt="">
 </div>
</body>
</html>

I am using 50x50 px thumbnails.

Can you give me some advice to keep both border and shadow and keeping the layout?

Thanks.

Ricardo

Help with thumbnails for gallery

rduenas

alt131

rduenas

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week