- fix bug 222 : comments page broken with IE

		IE doesn't understand child selector nor min-height
		use floating design instead of positionning


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

2 files changed, 24 insertions, 17 deletions

diff --git a/template/yoga/content.css b/template/yoga/content.css
index 725e5f95d..a1e1a6de5 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -145,20 +145,22 @@ ul.categoryActions {
 
 /* User comments */
 
+#content DIV#comments {
+  padding-left: 5px;
+  padding-right: 5px;
+  -moz-box-sizing: padding-box;
+}
 #content DIV.comment {
-  margin: 5px;
-  border: 1px solid gray;
-  min-height: 150px; /* maximum thumbnail height */
+  margin: 0 0 0.5em 0;
+  padding: 0;
+  overflow: hidden; /* these 2 lines ensure the floating child is kept in the DIV */
+  width: 100%;	    /* don't ask why. It's a very usefull trick                   */
 }
 
-#content DIV.comment > A.illustration {
+#content DIV.comment A.illustration {
   display: block;
-  position: absolute;
-  margin: 5px;
-}
-
-#content DIV.comment > A.illustration IMG {
-  border: 1px solid gray;
+  float: left;
+  margin: 0.5em 0 0 0.5em;
 }
 
 #content DIV.comment P.commentHeader {
@@ -171,18 +173,15 @@ ul.categoryActions {
   margin: 0.2em;
 }
 
-#content DIV.comment > UL.actions > LI {
+#content DIV.comment  UL.actions  LI {
   display: inline;
 }
 
 #content DIV.comment BLOCKQUOTE {
-  margin: 1em 1em 1em 140px; /* margin-left corresponds to maximum thumbnail width */
-  border: 1px solid #d3d3d3; 
-  border-left: 2px solid gray;
+  margin: 1em 0.5em 0.5em 150px; /* margin-left corresponds to maximum thumbnail width + ~10px */
   padding: 0.5em;
 }
 
-
 /* should be in admin.css ? CSS properties also used in popuphelp */
 
 SPAN.pwgScreen {
diff --git a/template/yoga/default-colors.css b/template/yoga/default-colors.css
index 3edf2d7cc..3f26e9208 100644
--- a/template/yoga/default-colors.css
+++ b/template/yoga/default-colors.css
@@ -98,9 +98,17 @@ A.navThumb, A.navThumb:hover {
     background:#eeeeee;
 }
 
+/* User comments */
+#content DIV.comment {
+  border: 1px solid gray;
+}
 
-#comments BLOCKQUOTE {
-    background: #eeeeee;
+#content DIV.comment  A.illustration IMG {
+  border: 1px solid gray;
+}
+
+#comments DIV.comment BLOCKQUOTE {
+    border: 1px solid #d3d3d3;
     border-left: 2px solid #696969;
 }