diff --git a/less/buttons.less b/less/buttons.less index 5f6f0c24b2742bdac5699142aee9ed0b02f9ec46..06a7d91bdfbf2d08cd042059d1d6d759282c2b7b 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 dd331ebf28ce72bddce3c62fb0875f0e2a840666..745fe33d950e3b439fbc8ed11002f5281e77dccb 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 599434b2bc38ce8d668e7939b76438f29dde164d..fac416df332e2fa0561a7827139cdd6c67f109e2 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);