improve caddie display : better checkbox positionning in every tested browsers.

	Opera still not perfect , but much better.

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

4 files changed, 27 insertions, 19 deletions

diff --git a/template-common/default-layout.css b/template-common/default-layout.css
index 2a0cbd086..79797560b 100644
--- a/template-common/default-layout.css
+++ b/template-common/default-layout.css
@@ -27,7 +27,7 @@ BODY#theAdminPage #content {
 /* Set some sizes according to your maximum thumbnail width and height */
 #content UL.thumbnails SPAN,
 #content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL,
+#content UL.thumbnails LABEL,
 #content DIV.thumbnailCategory DIV.illustration {
   width: 140px;			/* max thumbnail width + 2px */
 }
diff --git a/template/yoga/admin/element_set_global.tpl b/template/yoga/admin/element_set_global.tpl
index 7bb9d7006..88acd3a50 100644
--- a/template/yoga/admin/element_set_global.tpl
+++ b/template/yoga/admin/element_set_global.tpl
@@ -32,14 +32,17 @@
   <!-- BEGIN thumbnails -->
   <ul class="thumbnails">
     <!-- BEGIN thumbnail -->
-    <li><span class="wrap1"><span class="wrap2">
+    <li><span class="wrap1">
         <label>
-        <img src="{thumbnails.thumbnail.SRC}"
-             alt="{thumbnails.thumbnail.ALT}"
-             title="{thumbnails.thumbnail.TITLE}"
-             class="thumbnail" />
-        <input type="checkbox" name="selection[]" value="{thumbnails.thumbnail.ID}" />
-        </label></span></span>
+          <span class="wrap2"><span>
+            <img src="{thumbnails.thumbnail.SRC}"
+               alt="{thumbnails.thumbnail.ALT}"
+               title="{thumbnails.thumbnail.TITLE}"
+               class="thumbnail" />
+          </span></span>
+          <input type="checkbox" name="selection[]" value="{thumbnails.thumbnail.ID}" />
+        </label>
+        </span>
     </li>
     <!-- END thumbnail -->
   </ul>
diff --git a/template/yoga/thumbnails-fix-ie5-ie6.css b/template/yoga/thumbnails-fix-ie5-ie6.css
index 25af117a8..66adaad08 100644
--- a/template/yoga/thumbnails-fix-ie5-ie6.css
+++ b/template/yoga/thumbnails-fix-ie5-ie6.css
@@ -6,12 +6,13 @@
   text-align: left;
 }
 #content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
+#content UL.thumbnails SPAN.wrap2 SPAN {
   overflow: visible;
   position: absolute;
   top: 50%;
   text-align: center;
 }
+
 #content UL.thumbnails IMG.thumbnail {
   position: relative;
   top: -50%;
@@ -19,9 +20,8 @@
     margin-top: -40%;
   /**/
 }
-#content UL.thumbnails SPAN.wrap2 input {
+#content UL.thumbnails INPUT {
   position: absolute;
-  left: 0;
-  top: -50%;  /* same as other browsers but not so pretty */
+  left: 2px;
+  top: 2px;  /* same as other browsers but not so pretty */
 }
-
diff --git a/template/yoga/thumbnails.css b/template/yoga/thumbnails.css
index c73d080ef..854a10dda 100644
--- a/template/yoga/thumbnails.css
+++ b/template/yoga/thumbnails.css
@@ -27,7 +27,7 @@
   vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
 }
 #content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
+#content UL.thumbnails LABEL {
   display: block;
   border-bottom: none;
 }
@@ -36,12 +36,17 @@
 }
 
 /* label and input used for caddie in admin section */
-#content UL.thumbnails SPAN.wrap2 LABEL {
+#content UL.thumbnails LABEL {
   position: relative;
 }
-:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
-  position: absolute;
-  left: 0;
-  top: 0;
+
+#content UL.thumbnails INPUT {
+  position: relative;	/* <= Opera can handle relative here */
+  top: -20px;
+}
+:root #content UL.thumbnails INPUT { /* hide from Opera */
+  position: absolute;	/* <= Opera hide 1 checkbox over 2 !!! */
+  left: 2px;
+  top: 2px;
 }