#895898 by Jeff Burnz: Fixed Comment user picture can overflow its container in Bartik

4 files changed, 34 insertions, 9 deletions

diff --git a/themes/bartik/css/ie-rtl.css b/themes/bartik/css/ie-rtl.css
index ed901e16e..b779f8160 100644
--- a/themes/bartik/css/ie-rtl.css
+++ b/themes/bartik/css/ie-rtl.css
@@ -8,6 +8,18 @@ ul.action-links li a,
 #user-login li.openid-link a {
   zoom: 1;
 }
+.comment .attribution {
+  float: right;
+}
+.comment-text {
+  float: right;
+  margin-left: 0;
+  margin-right: 25px;
+}
+.comment .comment-arrow {
+  position: absolute;
+  right: 25px;
+}
 .region-header .block,
 .region-header #block-user-login .form-item {
   float: none;
diff --git a/themes/bartik/css/ie.css b/themes/bartik/css/ie.css
index 963e96bbe..e2c6b6044 100644
--- a/themes/bartik/css/ie.css
+++ b/themes/bartik/css/ie.css
@@ -13,6 +13,17 @@ fieldset legend {
 #footer-wrapper #footer .block {
   height: 100%;
 }
+.comment .attribution {
+  display: inline;
+  float: left; /* LTR */
+  overflow: hidden;
+  padding: 0;
+}
+.comment-text {
+  display: inline;
+  float: left; /* LTR */
+  margin-left: 25px; /* LTR */
+}
 #search-block-form input.form-submit,
 #search-form input.form-submit {
   text-transform: capitalize; /* Trigger text indent. */
diff --git a/themes/bartik/css/style-rtl.css b/themes/bartik/css/style-rtl.css
index f1603f2d8..8b76d4b18 100644
--- a/themes/bartik/css/style-rtl.css
+++ b/themes/bartik/css/style-rtl.css
@@ -107,14 +107,12 @@ ul.tips {
 }
 .comment .attribution {
   float: right;
+  padding: 0 0 0 30px;
 }
 .comment .comment-arrow {
   background: url(../images/comment-arrow-rtl.png);
-  margin-right: -45px;
-}
-.comment .comment-text {
-  margin-right: 140px;
   margin-left: 0;
+  margin-right: -45px;
 }
 .comment .indented {
   margin-right: 40px;
diff --git a/themes/bartik/css/style.css b/themes/bartik/css/style.css
index 08deb2236..65049e25f 100644
--- a/themes/bartik/css/style.css
+++ b/themes/bartik/css/style.css
@@ -591,12 +591,14 @@ ul.links {
 }
 .comment {
   margin-bottom: 20px;
-  position: relative;
+  display: table;
+  vertical-align: top;
 }
 .comment .attribution {
-  padding-top: 20px;
-  float: left; /* LTR */
-  width: 110px;
+  display: table-cell;
+  padding: 0 30px 0 0; /* LTR */
+  vertical-align: top;
+  overflow: hidden;
 }
 .comment .attribution img {
   margin: 0;
@@ -628,9 +630,11 @@ ul.links {
   position: absolute;
 }
 .comment .comment-text {
-  margin-left: 140px; /* LTR */
   padding: 10px 25px;
   border: 1px solid #d3d7d9;
+  display: table-cell;
+  vertical-align: top;
+  position: relative;
 }
 .comment .indented {
   margin-left: 40px; /* LTR */