Hi, I have this weird space between my customized button elements. Here are the codes:

The markup:

<button>
     <span>Sample Button</span>
</button>

The css:

button{
    padding: 3px 4px 3px; 
    margin:0px; 
    outline: none;
    color: #1c1c1c; 
    font-size: 11px; 
    font-weight: bold;  
    background-color:#FFFFFF; 
    border-color:#BFBFBF #BFBFBF #AFAFAF;
    border-style:solid; 
    border-width:1px; 
    cursor: pointer;
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
}

button span{
    line-height:14px; 
    outline: none;
    margin:0px; 
    padding: 0;
}

The buttons should have no space base on the code above and IE8 follow this rule. I don't understand why firefox, safari, and opera add the extra space in between.

Screenies:

alt text

As seen on Safari, Firefox, Opera

alt text

As seen on IE8

Any ideas? Thanks!

3 answers

2
points

Is there any whitespace between the two buttons in your HTML code? I have a feeling button defaults to being an inline-block element, so any trailing space will be honoured.

The other option is to try floating the button.

(Also, I suspect IE8 is in either compatibility or IE7 mode - bring up the developer tools to check)

Answered almost 7 years ago by Olly Hodgson
  • that seems to be it - set the buttons to display:block and then float them left and the space vanishes - great answer :) danwellman almost 7 years ago
  • There is no trailing space on the markup. Thanks for the float suggestion. :) voidnothings almost 7 years ago
  • He may have meant the line-break in between the buttons. Alternatively, instead of seting them to display:block;float:left; you could put the buttons (and their inner spans) all on the same line in the HTML doc... danwellman almost 7 years ago
  • I have tried it already :D still the same. voidnothings almost 7 years ago
danwellman 5600
1
point

This appears to be just the way that modern browsers handle button elements - even IE8 inserts the gap, it just just IE7 and lower that does not insert the gap. Based on the fact that three standards-compliant browsers (as well as IE8) insert the space and two standards-noncompliant do not insert it the spacing appears to be correct, although there doesn't seem to be any CSS that naturally removes the space.

If you add margin-right:-5px; to the button selector for modern browsers it should remove the space, and then you can use either a conditional comment or a CSS hack to remove the negative margin on IE7 and IE6...

Answered almost 7 years ago by danwellman
  • I suspect you meant -5px; :) If my guess about white-space is correct it'll vary depending on the user's font-size preferences. Olly Hodgson almost 7 years ago
  • yup, that's what I meant ;) danwellman almost 7 years ago
  • Thanks for the suggestion :) voidnothings almost 7 years ago
danwellman 5600
1
point

Ok, use either:

<button><span>Sample Button1</span></button><button><span>Sample Button2</span></button>

Or use

<button>
     <span>Sample Button1</span>
</button>
<button>
     <span>Sample Button2</span>
</button>

With this CSS:

  button {  display:block; float:left; /* your other styles here...*/ }

Either of these solutions will remove the space between the buttons - I just tested and the first method doesn't use any additional CSS :)

Answered almost 7 years ago by danwellman