Cleans up IE7 inline margins for buttons and adds them for sprites, also fixes button padding for large/small sizes

3 files changed, 40 insertions, 10 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 5f6f0c24b..06a7d91bd 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -67,12 +67,6 @@
   // Button Base
   display: inline-block;
   padding: 4px 10px 4px;
-  // IE7 likes to collapse the whitespace before the button, so bring it back...
-  *margin-left: 4px;
-  &:first-child {
-    // ...but not before the first button
-    *margin-left: 0;
-  }
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @grayDark;
@@ -85,6 +79,8 @@
   .box-shadow(@shadow);
   cursor: pointer;
 
+  .ie7-restore-left-whitespace;
+
   &:hover {
     color: @grayDark;
     text-decoration: none;
@@ -129,7 +125,7 @@
 
   // Button Sizes
   &.large {
-    padding: 9px 14px 9px;
+    padding: 9px 14px;
     font-size: @baseFontSize + 2px;
     line-height: normal;
     .border-radius(5px);
@@ -138,7 +134,7 @@
     margin-top: 1px;
   }
   &.small {
-    padding: 5px 9px 5px;
+    padding: 5px 9px;
     font-size: @baseFontSize - 2px;
     line-height: @baseLineHeight - 2px;
   }
@@ -150,10 +146,20 @@
 // Help Firefox not be a jerk about adding extra padding to buttons
 button.btn,
 input[type=submit].btn {
-  // IE7 has some default padding on button controls
-  *padding: 2px 10px;
   &::-moz-focus-inner {
   	padding: 0;
   	border: 0;
   }
+
+  // IE7 has some default padding on button controls
+  *padding-top: 2px;
+  *padding-bottom: 2px;
+  &.large {
+    *padding-top: 7px;
+    *padding-bottom: 7px;
+  }
+  &.small {
+    *padding-top: 3px;
+    *padding-bottom: 3px;
+  }
 }
diff --git a/less/mixins.less b/less/mixins.less
index dd331ebf2..745fe33d9 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -36,6 +36,28 @@
   *zoom: 1;
 }
 
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+.ie7-restore-left-whitespace() {
+  *margin-left: .3em;
+
+  &:first-child {
+    *margin-left: 0;
+  }
+}
+
+.ie7-restore-right-whitespace() {
+  *margin-right: .3em;
+
+  &:last-child {
+    *margin-left: 0;
+  }
+}
+
 // Sizing shortcuts
 // -------------------------
 .size(@height: 5px, @width: 5px) {
diff --git a/less/sprites.less b/less/sprites.less
index 599434b2b..fac416df3 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -19,6 +19,8 @@
   vertical-align: text-top;
   width: 14px;
   height: 14px;
+
+  .ie7-restore-right-whitespace;
 }
 .icon.white {
   background-image: url(../img/glyphicons-halflings-sprite-white.png);