bug 206 fixed: PNG thumbnails clipped with IE

	- added class="icon" to recent.png (functions_html.inc.php)
	- added class="button" to al png button images (*.tpl)
	- changed pngfix.js to only fix icon or button images
template improvement: category prettier and simpler (a little bit)
	- got rid of one SPAN level
	- content.css more readable


git-svn-id: http://piwigo.org/svn/branches/branch-1_5@939 68402e56-0260-453c-a942-63ccdbb3a9ee

27 files changed, 103 insertions, 95 deletions

diff --git a/include/functions_html.inc.php b/include/functions_html.inc.php
index 5fe88fb63..21dcf0834 100644
--- a/include/functions_html.inc.php
+++ b/include/functions_html.inc.php
@@ -48,8 +48,8 @@ function get_icon( $date )
     $title .= $user['recent_period'];
     $title .=  ' '.$lang['days'];
     $size = getimagesize( $icon_url );
-    $output = '<img title="'.$title.'" src="'.$icon_url.'" style="border:0;';
-    $output.= 'height:'.$size[1].'px;width:'.$size[0].'px" alt="" />';
+    $output = '<img title="'.$title.'" src="'.$icon_url.'" class="icon" style="border:0;';
+    $output.= 'height:'.$size[1].'px;width:'.$size[0].'px" alt="(!)" />';
   }
   return $output;
 }
diff --git a/include/pngfix.js b/include/pngfix.js
index ba1a099ae..a543c09cb 100644
--- a/include/pngfix.js
+++ b/include/pngfix.js
@@ -6,7 +6,9 @@ function correctPNG()
    {
    for(var i=0; i<document.images.length; i++)
       {
-	  var img = document.images[i]
+      var img = document.images[i]
+      if (img.className == "button" || img.className == "icon")
+          {
 	  var imgName = img.src.toUpperCase()
 	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 	     {
@@ -24,6 +26,7 @@ function correctPNG()
 		 img.outerHTML = strNewHTML
 		 i = i-1
 	     }
+          }
       }
    }
-window.attachEvent("onload", correctPNG);
\ No newline at end of file
+window.attachEvent("onload", correctPNG);
diff --git a/template/yoga/about.tpl b/template/yoga/about.tpl
index 1344f9c7e..71abb3ce3 100644
--- a/template/yoga/about.tpl
+++ b/template/yoga/about.tpl
@@ -2,7 +2,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:About}</h2>
   </div>
diff --git a/template/yoga/admin/cat_list.tpl b/template/yoga/admin/cat_list.tpl
index 516917c8e..aac892fd1 100644
--- a/template/yoga/admin/cat_list.tpl
+++ b/template/yoga/admin/cat_list.tpl
@@ -11,17 +11,17 @@
     <li class="categoryLi"> <!-- category {category.ID} -->
 
       <ul class="categoryActions">
-        <li><a href="{category.U_JUMPTO}" title="{lang:jump to category}"><img src="./template/yoga/theme/category_jump-to.png" alt="{lang:jump to}" /></a></li> 
-        <li><a href="{category.U_EDIT}" title="{lang:edit category informations}"><img src="./template/yoga/theme/category_edit.png" alt="{lang:edit}"/></a></li>
+        <li><a href="{category.U_JUMPTO}" title="{lang:jump to category}"><img src="./template/yoga/theme/category_jump-to.png" class="button" alt="{lang:jump to}" /></a></li> 
+        <li><a href="{category.U_EDIT}" title="{lang:edit category informations}"><img src="./template/yoga/theme/category_edit.png" class="button" alt="{lang:edit}"/></a></li>
         <!-- BEGIN elements -->
-        <li><a href="{category.elements.URL}" title="{lang:manage category elements}"><img src="./template/yoga/theme/category_elements.png" alt="{lang:elements}" /></a></li>
+        <li><a href="{category.elements.URL}" title="{lang:manage category elements}"><img src="./template/yoga/theme/category_elements.png" class="button" alt="{lang:elements}" /></a></li>
         <!-- END elements -->
-        <li><a href="{category.U_CHILDREN}" title="{lang:manage sub-categories}"><img src="./template/yoga/theme/category_children.png" alt="{lang:sub-categories}" /></a></li> 
+        <li><a href="{category.U_CHILDREN}" title="{lang:manage sub-categories}"><img src="./template/yoga/theme/category_children.png" class="button" alt="{lang:sub-categories}" /></a></li> 
         <!-- BEGIN permissions -->
-        <li><a href="{category.permissions.URL}" title="{lang:edit category permissions}" ><img src="./template/yoga/theme/category_permissions.png" alt="{lang:permissions}" /></a></li>
+        <li><a href="{category.permissions.URL}" title="{lang:edit category permissions}" ><img src="./template/yoga/theme/category_permissions.png" class="button" alt="{lang:permissions}" /></a></li>
         <!-- END permissions -->
         <!-- BEGIN delete -->
-        <li><a href="{category.delete.URL}" title="{lang:delete category}"><img src="./template/yoga/theme/category_delete.png" alt="{lang:delete}" /></a></li>
+        <li><a href="{category.delete.URL}" title="{lang:delete category}"><img src="./template/yoga/theme/category_delete.png" class="button" alt="{lang:delete}" /></a></li>
         <!-- END delete -->
       </ul>
 
diff --git a/template/yoga/admin/cat_modify.tpl b/template/yoga/admin/cat_modify.tpl
index aef85cb37..b25770cc0 100644
--- a/template/yoga/admin/cat_modify.tpl
+++ b/template/yoga/admin/cat_modify.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:title_edit_cat}</h2>
 </div>
@@ -9,16 +9,16 @@
 <h3>{CATEGORIES_NAV}</h3>
 
 <ul class="categoryActions">
-  <li><a href="{U_JUMPTO}" title="{lang:jump to category}"><img src="./template/yoga/theme/category_jump-to.png" alt="{lang:jump to}" /></a></li>
+  <li><a href="{U_JUMPTO}" title="{lang:jump to category}"><img src="./template/yoga/theme/category_jump-to.png" class="button" alt="{lang:jump to}" /></a></li>
   <!-- BEGIN elements -->
-  <li><a href="{elements.URL}" title="{lang:manage category elements}"><img src="./template/yoga/theme/category_elements.png" alt="{lang:elements}" /></a></li>
+  <li><a href="{elements.URL}" title="{lang:manage category elements}"><img src="./template/yoga/theme/category_elements.png" class="button" alt="{lang:elements}" /></a></li>
   <!-- END elements -->
-  <li><a href="{U_CHILDREN}" title="{lang:manage sub-categories}"><img src="./template/yoga/theme/category_children.png" alt="{lang:sub-categories}" /></a></li>
+  <li><a href="{U_CHILDREN}" title="{lang:manage sub-categories}"><img src="./template/yoga/theme/category_children.png" class="button" alt="{lang:sub-categories}" /></a></li>
   <!-- BEGIN permissions -->
-  <li><a href="{permissions.URL}" title="{lang:edit category permissions}" ><img src="./template/yoga/theme/category_permissions.png" alt="{lang:permissions}" /></a></li>
+  <li><a href="{permissions.URL}" title="{lang:edit category permissions}" ><img src="./template/yoga/theme/category_permissions.png" class="button" alt="{lang:permissions}" /></a></li>
   <!-- END permissions -->
   <!-- BEGIN delete -->
-  <li><a href="{delete.URL}" title="{lang:delete category}"><img src="./template/yoga/theme/category_delete.png" alt="{lang:delete}" /></a></li>
+  <li><a href="{delete.URL}" title="{lang:delete category}"><img src="./template/yoga/theme/category_delete.png" class="button" alt="{lang:delete}" /></a></li>
   <!-- END delete -->
 </ul>
 
@@ -118,7 +118,7 @@
         <!-- END picture -->
 
         <!-- BEGIN random -->
-        <img src="./template/yoga/theme/category_representant_random.png" alt="{lang:Random picture}" class="miniature" />
+        <img src="./template/yoga/theme/category_representant_random.png" class="button" alt="{lang:Random picture}" class="miniature" />
         <!-- END random -->
       </td>
       <td>
diff --git a/template/yoga/admin/cat_move.tpl b/template/yoga/admin/cat_move.tpl
index eb6ccde36..cdf913868 100644
--- a/template/yoga/admin/cat_move.tpl
+++ b/template/yoga/admin/cat_move.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:Move categories}</h2>
 </div>
diff --git a/template/yoga/admin/cat_options.tpl b/template/yoga/admin/cat_options.tpl
index 052b2a99c..dbc2b5353 100644
--- a/template/yoga/admin/cat_options.tpl
+++ b/template/yoga/admin/cat_options.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:title_cat_options}</h2>
 </div>
diff --git a/template/yoga/admin/cat_perm.tpl b/template/yoga/admin/cat_perm.tpl
index 0bc6efbcb..d531a9ccd 100644
--- a/template/yoga/admin/cat_perm.tpl
+++ b/template/yoga/admin/cat_perm.tpl
@@ -1,6 +1,6 @@
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:Manage permissions for a category}</h2>
 </div>
diff --git a/template/yoga/admin/configuration.tpl b/template/yoga/admin/configuration.tpl
index c2985c073..a3e8e9eb7 100644
--- a/template/yoga/admin/configuration.tpl
+++ b/template/yoga/admin/configuration.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:title_configuration}</h2>
 </div>
diff --git a/template/yoga/admin/group_list.tpl b/template/yoga/admin/group_list.tpl
index 41e76cf3b..fa03cb56e 100644
--- a/template/yoga/admin/group_list.tpl
+++ b/template/yoga/admin/group_list.tpl
@@ -20,8 +20,8 @@
     <td>{group.NAME}</td>
     <td><a href="{group.U_MEMBERS}">{group.MEMBERS}</a></td>
     <td style="text-align:center;">
-      <a href="{group.U_PERM}"><img src="./template/yoga/theme/permissions.png" style="border:none" alt="permissions" title="{lang:permissions}" /></a>
-      <a href="{group.U_DELETE}"><img src="./template/yoga/theme/delete.png" style="border:none" alt="delete" title="{lang:delete}" /></a>
+      <a href="{group.U_PERM}"><img src="./template/yoga/theme/permissions.png" class="button" style="border:none" alt="permissions" title="{lang:permissions}" /></a>
+      <a href="{group.U_DELETE}"><img src="./template/yoga/theme/delete.png" class="button" style="border:none" alt="delete" title="{lang:delete}" /></a>
     </td>
   </tr>
   <!-- END group -->
diff --git a/template/yoga/admin/maintenance.tpl b/template/yoga/admin/maintenance.tpl
index 7fe6c8ab5..692c5204b 100644
--- a/template/yoga/admin/maintenance.tpl
+++ b/template/yoga/admin/maintenance.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:Maintenance}</h2>
 </div>
diff --git a/template/yoga/admin/picture_modify.tpl b/template/yoga/admin/picture_modify.tpl
index 9cb4af880..b62e08025 100644
--- a/template/yoga/admin/picture_modify.tpl
+++ b/template/yoga/admin/picture_modify.tpl
@@ -5,9 +5,9 @@
 
 <ul class="categoryActions">
   <!-- BEGIN jumpto -->
-  <li><a href="{jumpto.URL}" title="{lang:jump to image}"><img src="./template/yoga/theme/category_jump-to.png" alt="{lang:jump to}" /></a></li>
+  <li><a href="{jumpto.URL}" title="{lang:jump to image}"><img src="./template/yoga/theme/category_jump-to.png" class="button" alt="{lang:jump to}" /></a></li>
   <!-- END jumpto -->
-  <li><a href="{U_SYNC}" title="{lang:synchronize metadata}"><img src="./template/yoga/theme/sync_metadata.png" alt="{lang:synchronize}" /></a></li>
+  <li><a href="{U_SYNC}" title="{lang:synchronize metadata}"><img src="./template/yoga/theme/sync_metadata.png" class="button" alt="{lang:synchronize}" /></a></li>
 </ul>
 
 <form action="{F_ACTION}" method="post" id="properties">
diff --git a/template/yoga/admin/remote_site.tpl b/template/yoga/admin/remote_site.tpl
index 8f41384f6..69983a32c 100644
--- a/template/yoga/admin/remote_site.tpl
+++ b/template/yoga/admin/remote_site.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:remote_sites}</h2>
 </div>
@@ -80,4 +80,4 @@
   </tr>
   <!-- END site -->
 </table>
-<!-- END sites -->
\ No newline at end of file
+<!-- END sites -->
diff --git a/template/yoga/admin/thumbnail.tpl b/template/yoga/admin/thumbnail.tpl
index 9e0d70f5e..f551c66be 100644
--- a/template/yoga/admin/thumbnail.tpl
+++ b/template/yoga/admin/thumbnail.tpl
@@ -1,7 +1,7 @@
 <!-- $Id$ -->
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:title_thumbnails}</h2>
 </div>
diff --git a/template/yoga/admin/update.tpl b/template/yoga/admin/update.tpl
index 1776b1bdd..ad3491ffe 100644
--- a/template/yoga/admin/update.tpl
+++ b/template/yoga/admin/update.tpl
@@ -2,7 +2,7 @@
 
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:title_update}</h2>
 </div>
diff --git a/template/yoga/admin/user_list.tpl b/template/yoga/admin/user_list.tpl
index a3392d6f6..7e15175cb 100644
--- a/template/yoga/admin/user_list.tpl
+++ b/template/yoga/admin/user_list.tpl
@@ -1,6 +1,6 @@
 <div class="titrePage">
   <ul class="categoryActions">
-    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
+    <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
   </ul>
   <h2>{lang:title_liste_users}</h2>
 </div>
@@ -90,7 +90,7 @@
     <td>{user.EMAIL}</td>
     <td>{user.GROUPS}</td>
     <td style="text-align:center;">
-      <a href="{user.U_PERM}"><img src="./template/yoga/theme/permissions.png" style="border:none" alt="{L_PERMISSIONS}" title="{L_PERMISSIONS}" /></a>
+      <a href="{user.U_PERM}"><img src="./template/yoga/theme/permissions.png" class="button" style="border:none" alt="{L_PERMISSIONS}" title="{L_PERMISSIONS}" /></a>
     </td>
   </tr>
   <!-- END user -->
diff --git a/template/yoga/category.tpl b/template/yoga/category.tpl
index 1349c92ce..de46b3d04 100644
--- a/template/yoga/category.tpl
+++ b/template/yoga/category.tpl
@@ -104,10 +104,10 @@
     <ul class="categoryActions">
       <li>&nbsp;</li>
       <!-- BEGIN caddie -->
-      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/yoga/theme/caddie_add.png" alt="{lang:caddie}"/></a></li>
+      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/yoga/theme/caddie_add.png" class="button" alt="{lang:caddie}"/></a></li>
       <!-- END caddie -->
       <!-- BEGIN edit -->
-      <li><a href="{edit.URL}" title="{lang:edit category informations}"><img src="./template/yoga/theme/category_edit.png" alt="{lang:edit}"/></a></li>
+      <li><a href="{edit.URL}" title="{lang:edit category informations}"><img src="./template/yoga/theme/category_edit.png" class="button" alt="{lang:edit}"/></a></li>
       <!-- END edit -->
     </ul>
     <h2>{TITLE}</h2>
@@ -122,14 +122,15 @@
   <!-- BEGIN line -->
   <!-- BEGIN thumbnail -->
   <li>
-    <span>
-      <span><span class="wrap">
+    <span class="wrap1">
+      <span class="wrap2">
         <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
-          <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
-	  alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
-	  title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
+            <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
+	    alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
+	    title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
         </a>
-      </span></span>
+      </span>
+      <span class="thumbLegend">
       <!-- BEGIN element_name -->
       {thumbnails.line.thumbnail.element_name.NAME}
       <!-- END element_name -->
@@ -140,7 +141,8 @@
       <!-- BEGIN nb_comments -->
       <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT}
       <!-- END nb_comments -->
-     </span>
+      </span>
+    </span>
   </li>
   <!-- END thumbnail -->
   <!-- END line -->
diff --git a/template/yoga/comments.tpl b/template/yoga/comments.tpl
index bb4b7726b..725fb6184 100644
--- a/template/yoga/comments.tpl
+++ b/template/yoga/comments.tpl
@@ -3,7 +3,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:User comments}</h2>
   </div>
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 8ed3d1189..725e5f95d 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -29,8 +29,28 @@ BODY#theNotificationPage #content
     margin-bottom: 1ex;
 }
 
+/* Thumbnails customization */
+#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A {
+  width: 140px;			/* max thumbnail width + 2px */
+}
+#content UL.thumbnails SPAN.wrap2 {
+  height: 140px;		/* max thumbnail height + 2px */
+}
+#content UL.thumbnails SPAN.wrap2 {
+  border: 1px solid #aaaaaa;	/* thumbnails border color and style */
+  -moz-border-radius: 4px;	/* round corners with Geko */
+  border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
+}
+#content UL.thumbnails SPAN.wrap2:hover {
+  border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
+}
+#content UL.thumbnails SPAN.thumbLegend {
+  font-size: 80%;		/* font size */
+  height: 3em;			/* max legend height (don't set auto to be Geko friendly)*/
+  display: block;		/* display: hide if you don't want legend */
+  overflow: hidden;		/* oversized legend is clipped */
+}
 /* Thumbnail "elastic" layout */
-
 #content UL.thumbnails {
   margin: 0;
   padding: 0;
@@ -39,59 +59,42 @@ BODY#theNotificationPage #content
 }
 #content UL.thumbnails LI { display: inline }
 
-#content UL.thumbnails SPAN {
+#content UL.thumbnails SPAN.wrap1 {
   margin: 0 5px 5px 5px;
-  /*width: 130px;		 128px + 2 * 1px if the SPAN has a border of 1px */
-  width: 128px;			/* we can use the same size as well */
   display: table-cell; display: inline-table; display: inline-block;
   vertical-align: top;		/* OK with Opera and IE6 not Geko */
   text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
-  font-size: 80%;
 }
-#content UL.thumbnails SPAN SPAN {
+#content UL.thumbnails SPAN.wrap2 {
   margin: 0;			/* important reset the margins */
-  border: 1px solid #aaaaaa;
-  width: 128px;			/* fixed size again */
-  height: 128px;		/* fixed size again */
   display: table-cell;		/* block prevents vertical-align here */
   vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
 }
-#content UL.thumbnails SPAN.wrap {
-  border: none;
-  height: auto;		/* important for vertical centering */
-  display: block;	/* important */
-  overflow: hidden;	/* everridden by specific IE6 rule below */
-  margin-top: auto;	/* to make vertical-align work in Geko and Opera */
-  margin-bottom: auto;	/* to make vertical-align work in Geko and Opera */
+#content UL.thumbnails SPAN.wrap2 A {
+  display: block;
+  border-bottom: none;
 }
 #content UL.thumbnails IMG {
   margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
 }
-/* fix Geko's lack of good willing in vertical-align: top */
-/* Too dirty : have to find something better */
-/*#content UL.thumbnails>LI>SPAN{*/
-/*  height: 170px;*/	/* unfortunately min-height doesn't work here */
-/*}*/
 
 /* fix IE with another layout */
-* html #content UL.thumbnails SPAN {
-  overflow: hidden;	/* keep it there: not needed by Geko, buggy with Opera */
-}
-* html #content UL.thumbnails SPAN SPAN {
+* html #content UL.thumbnails SPAN.wrap2 {
+  display: block;
   position: relative;
+  text-align: left;
 }
-* html #content UL.thumbnails SPAN.wrap {
+* html #content UL.thumbnails SPAN.wrap2 A {
   overflow: visible;
   position: absolute;
   top: 50%;
-  left: 0px;		/* same as "#content UL.thumbnails SPAN SPAN { padding:" if any*/
+  text-align: center;
 }
 * html #content UL.thumbnails IMG.thumbnail {
   position: relative;
   top: -50%;
 }
 
-
 #content .navigationBar, #content .additional_info {
     margin: 10px 0;
     text-align: center;
@@ -173,7 +176,7 @@ ul.categoryActions {
 }
 
 #content DIV.comment BLOCKQUOTE {
-  margin: 1em 1em 1em 150px; /* margin-left corresponds to maximum thumbnail width */
+  margin: 1em 1em 1em 140px; /* margin-left corresponds to maximum thumbnail width */
   border: 1px solid #d3d3d3; 
   border-left: 2px solid gray;
   padding: 0.5em;
diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl
index ef4fc2e8c..93e425a28 100644
--- a/template/yoga/identification.tpl
+++ b/template/yoga/identification.tpl
@@ -3,9 +3,9 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_LOST_PASSWORD}" title="{lang:Forgot your password?}"><img src="template/yoga/theme/lost_password.png" alt="{lang:Forgot your password?}"></a></li>
-      <li><a href="{U_REGISTER}" title="{lang:Create a new account}"><img src="./template/yoga/theme/register.png" alt="{lang:register}"/></a></li>
-      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_LOST_PASSWORD}" title="{lang:Forgot your password?}"><img src="template/yoga/theme/lost_password.png" class="button" alt="{lang:Forgot your password?}"></a></li>
+      <li><a href="{U_REGISTER}" title="{lang:Create a new account}"><img src="./template/yoga/theme/register.png" class="button" alt="{lang:register}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Identification}</h2>
   </div>
@@ -48,8 +48,8 @@
 </form>
  
   <p>
-    <a href="{U_REGISTER}"><img src="template/yoga/theme/register.png" alt=""> {L_REGISTER}</a>
-    <a href="{U_LOST_PASSWORD}"><img src="template/yoga/theme/lost_password.png" alt=""> {lang:Forgot your password?}</a>
+    <a href="{U_REGISTER}"><img src="template/yoga/theme/register.png" class="button" alt=""> {L_REGISTER}</a>
+    <a href="{U_LOST_PASSWORD}"><img src="template/yoga/theme/lost_password.png" class="button" alt=""> {lang:Forgot your password?}</a>
   </p>
 
 </div> <!-- content -->
diff --git a/template/yoga/notification.tpl b/template/yoga/notification.tpl
index 974967e62..721b13982 100644
--- a/template/yoga/notification.tpl
+++ b/template/yoga/notification.tpl
@@ -2,7 +2,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Notification}</h2>
   </div>
diff --git a/template/yoga/password.tpl b/template/yoga/password.tpl
index e077fa905..685e4e605 100644
--- a/template/yoga/password.tpl
+++ b/template/yoga/password.tpl
@@ -3,7 +3,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Password forgotten}</h2>
   </div>
diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index c9df55eeb..f29362456 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -14,32 +14,32 @@
 <div id="imageToolBar">
 
 <div class="randomButtons">
-  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}"><img src="template/yoga/theme/slideshow.png" alt="{L_SLIDESHOW}"></a>
-  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}"><img src="template/yoga/theme/metadata.png" alt="{L_PICTURE_METADATA}"></a>
+  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}"><img src="template/yoga/theme/slideshow.png" class="button" alt="{L_SLIDESHOW}"></a>
+  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}"><img src="template/yoga/theme/metadata.png" class="button" alt="{L_PICTURE_METADATA}"></a>
 <!-- BEGIN representative -->
-  <a href="{representative.URL}" title="{lang:set as category representative}"><img src="template/yoga/theme/representative.png" alt="{lang:representative}" /></a>
+  <a href="{representative.URL}" title="{lang:set as category representative}"><img src="template/yoga/theme/representative.png" class="button" alt="{lang:representative}" /></a>
 <!-- END representative -->
 <!-- BEGIN favorite -->
-  <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" alt="{favorite.FAVORITE_ALT}"></a>
+  <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" class="button" alt="{favorite.FAVORITE_ALT}"></a>
 <!-- END favorite -->
 <!-- BEGIN download -->
-  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="template/yoga/theme/save.png" alt="{L_DOWNLOAD}"></a>
+  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="template/yoga/theme/save.png" class="button" alt="{L_DOWNLOAD}"></a>
 <!-- END download -->
 <!-- BEGIN admin -->
-  <a href="{U_ADMIN}" title="{L_ADMIN}"><img src="template/yoga/theme/preferences.png" alt="{L_ADMIN}"></a>
+  <a href="{U_ADMIN}" title="{L_ADMIN}"><img src="template/yoga/theme/preferences.png" class="button" alt="{L_ADMIN}"></a>
 <!-- END admin -->
 <!-- BEGIN caddie -->
-  <a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/yoga/theme/caddie_add.png" alt="{lang:caddie}"/></a>
+  <a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/yoga/theme/caddie_add.png" class="button" alt="{lang:caddie}"/></a>
 <!-- END caddie -->
 </div>
 
 <div class="navButtons">
 <!-- BEGIN next -->
-  <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}"><img src="template/yoga/theme/right.png" alt="next"></a>
+  <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}"><img src="template/yoga/theme/right.png" class="button" alt="next"></a>
 <!-- END next -->
-  <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}"><img src="template/yoga/theme/up.png" alt="{L_UP_ALT}"></a>
+  <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}"><img src="template/yoga/theme/up.png" class="button" alt="{L_UP_ALT}"></a>
 <!-- BEGIN previous -->
-  <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}"><img src="template/yoga/theme/left.png" alt="previous"></a>
+  <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}"><img src="template/yoga/theme/left.png" class="button" alt="previous"></a>
 <!-- END previous -->
 </div>
 
@@ -164,7 +164,7 @@
   <!-- BEGIN delete -->
   <p class="userCommentDelete">
   <a href="{comments.comment.delete.U_COMMENT_DELETE}" title="{L_DELETE_COMMENT}">
-    <img src="template/yoga/theme/delete.png" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/>
+    <img src="template/yoga/theme/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/>
   </a>
   </p>
   <!-- END delete -->
diff --git a/template/yoga/popuphelp.tpl b/template/yoga/popuphelp.tpl
index 23390c936..6c892312f 100644
--- a/template/yoga/popuphelp.tpl
+++ b/template/yoga/popuphelp.tpl
@@ -2,4 +2,4 @@
 {HELP_CONTENT}
 </div> <!-- content -->
 
-<p id="pageBottomActions"><a href="#" onclick="window.close();" title="{lang:Close this window}"><img src="template/yoga/theme/exit.png" alt="close"></a></p>
+<p id="pageBottomActions"><a href="#" onclick="window.close();" title="{lang:Close this window}"><img src="template/yoga/theme/exit.png" class="button" alt="close"></a></p>
diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl
index 400078474..a800cc142 100644
--- a/template/yoga/profile.tpl
+++ b/template/yoga/profile.tpl
@@ -12,7 +12,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_RETURN}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_RETURN}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Profile}</h2>
   </div>
diff --git a/template/yoga/register.tpl b/template/yoga/register.tpl
index 5aa861b41..92f647ff7 100644
--- a/template/yoga/register.tpl
+++ b/template/yoga/register.tpl
@@ -4,7 +4,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Registration}</h2>
   </div>
diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl
index 2f5b35dd9..1867cb2c5 100644
--- a/template/yoga/search.tpl
+++ b/template/yoga/search.tpl
@@ -2,8 +2,8 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" alt="(?)"></a></li>
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Search}</h2>
   </div>