The best thumbnail pseudo table I can do for now

It's div based and informations are in a list
The hack is to fix height for Geko only
Opera 7 doesn't display very well


git-svn-id: http://piwigo.org/svn/trunk@845 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 54 insertions, 33 deletions

diff --git a/template/cclear/category.tpl b/template/cclear/category.tpl
index 841ee8705..3e34dbe0c 100644
--- a/template/cclear/category.tpl
+++ b/template/cclear/category.tpl
@@ -94,8 +94,9 @@
 <div id="content">
   <div class="titrePage">
     <ul class="categoryActions">
+      <li>&nbsp;</li>
       <!-- BEGIN caddie -->
-      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/default/theme/caddie_add.png" /></a></li>
+      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/default/theme/caddie_add.png" alt="{lang:caddie}"/></a></li>
       <!-- END caddie -->
       <!-- BEGIN edit -->
       <li><a href="{edit.URL}" title="{lang:edit category informations}"><img src="./template/default/theme/category_edit.png" alt="{lang:edit}"/></a></li>
@@ -112,26 +113,28 @@
 <ul class="thumbnails">
   <!-- BEGIN line -->
   <!-- BEGIN thumbnail -->
-  <li><span>
-    <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}">
-    </a>
-      <!-- BEGIN element_name -->
-      <p>
-	<span class="thumb_picture">{thumbnails.line.thumbnail.element_name.NAME}</span>
+  <li class="thumbnails">
+    <div>
+        <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}">
+        </a>
+      <ul>
+      <li>
+	<!-- BEGIN element_name -->
+	{thumbnails.line.thumbnail.element_name.NAME}
 	<!-- END element_name -->
 	<!-- BEGIN category_name -->
-	<span class="thumb_category">[{thumbnails.line.thumbnail.category_name.NAME}]</span>
+	[{thumbnails.line.thumbnail.category_name.NAME}]
 	<!-- END category_name -->
 	{thumbnails.line.thumbnail.IMAGE_TS}
-      </p>
-    <!-- BEGIN nb_comments -->
-    <br />
-    {thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT}
-    <!-- END nb_comments -->
-  </span></li>
+      </li>
+      <!-- BEGIN nb_comments -->
+      <li>{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} </li>
+      <!-- END nb_comments -->
+     </div>
+  </li>
   <!-- END thumbnail -->
   <!-- END line -->
 
diff --git a/template/cclear/content.css b/template/cclear/content.css
index 885eef35c..355358ba3 100644
--- a/template/cclear/content.css
+++ b/template/cclear/content.css
@@ -16,38 +16,56 @@
 #content UL.thumbnails {
     margin: 0; padding: 0;
     list-style-type: none;
-    /*text-align: center;  eventuellement */
+    text-align: center;  /*eventuellement */
 }
 
-#content UL.thumbnails LI {
+#content LI.thumbnails {
 	display: inline;
-	/*text-align: center; */
 	padding: 0; text-indent: 0;
 	margin: 0 10px 10px 10px;
 }
+#content UL.thumbnails UL {
+	margin: 0; padding: 0; text-indent: 0;
+	list-style-type: none;
+}
 #content UL.thumbnails UL LI {
-	dislplay: list-item;
+	text-align: center; 
 }
-
-#content UL.thumbnails SPAN {
+#content UL.thumbnails div {
 	margin: 0;
-    	/*margin: 0 10px 10px 10px;*/
-    	vertical-align: top;
+    	vertical-align: top;   /*geko doesn't eat that :-(*/
+	text-align: center; 
     	width: 128px;
-    	display:table-cell;   /* for geko */
-	display:inline-table; /* for ??? (ask yoDan) */
-	display:inline-block; /* for IE */
-	text-align: center;    for IE */
-border: 1px solid yellow;
 }
+/* IE block level element inline-block hack */
+* html #content UL.thumbnails div {display:inline-block;}
+* html #content UL.thumbnails div {display:inline;}
+/* end of IE hack*/
+/* for non-IE */
+#content UL.thumbnails li>div {display:table-cell;display:inline-table;}
+
+/* Geko hack to get thumbnails top aligned*/
+/* not proud of that still looking for a better one */
+#content UL.thumbnails li>div {height:150px;}
+/* endof Geko hack*/
+
+/* align top with geko */
+/*#content UL.thumbnails li>div>div {
+	display: block;
+	position: relative;
+	height:128px;
+}
+#content UL.thumbnails li>div>div>a { position: absolute; top: 0; }
+#content UL.thumbnails li>div img.thumbnail { position: relative; left: -50%; }
+#content UL.thumbnails li>div ul {position: absolute; bottom: 0;}
+doesn't work :-((*/
+
 /*#content UL.thumbnails LI>SPAN { vertical-align: baseline; }*/
 #content UL.thumbnails LI IMG.thumbnail { margin-bottom: .4ex; }
 
 #content UL.thumbnails IMG.thumbnail { border: 1px solid #000000; }
 
-#content UL.thumbnails SPAN A:first-child { border: none }
-
-
+/*#content UL.thumbnails SPAN A:first-child { border: none }*/
 
 
 #content .navigationBar, #content .additional_info {