CODEWITHSUNDEEP
htmlcss
Shawn Mclean
Shawn Mclean

Reputation: 57469

HTML|CSS: Space between input buttons

I have a problem in which I have a space between these two buttons.

The code is as follows:

<input id="NeedBtn" class="PostBtn" type="button" />
<input id="ProvBtn" class="PostBtn" type="button" />

.PostBtn
{
   background: url(../Images/Buttons/PostButtonF.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: 0 0;
}
#ProvBtn
{
   background-position: -50px 0;
}

How do I remove that space?

Browser: Firefox 3.5

IE8

Upvotes: 39

Views: 75219

Answers (6)

Einar &#211;lafsson
Einar &#211;lafsson

Reputation: 3177

You can use css to fix it. Set float:left or float:right on the input buttons. That fixed the problem for me.

Upvotes: 8

Patrick Evans
Patrick Evans

Reputation: 42736

As others have pointed out you can use floats to counter act the whitespace between elements

<input id="NeedBtn" class="PostBtn floated" type="button" />
<input id="ProvBtn" class="PostBtn floated" type="button" />

.floated {
   float:left;
}


.floated {
  float:left;
}
<input id="NeedBtn" class="PostBtn floated" value="Next" type="button" />
<input id="ProvBtn" class="PostBtn floated" value="Prev" type="button" />

As well as the various hacks for inline-block:

  1. Using 0px font-size in parent and resetting the font-size in the child elements.
    <div class="parent">
        <div class="child">Some Text</div>
        <div class="child">Some More Text</div>
    </div>

    .parent {
       font-size:0px;
     }

     .parent > * {
       display:inline-block;
       font-size:14px;
     }
  1. Putting all the elements next to each other, ie: <div></div><div></div>

  2. Putting the closing tag on the next line and next to the next element, ie:

    <div>
</div><div>
</div>

  3. Putting the closing bracket of the previous element on the next line and next to the next element, ie:

    <div></div
><div></div>

  4. Or using html comments

    <div></div><!--
--><div></div>

And as stated by others this isn't an optimal solution.

With modern browsers Flexbox styles can now be used

<div class="flex">
    <input id="NeedBtn" class="PostBtn flex-child" type="button" />
    <input id="ProvBtn" class="PostBtn flex-child" type="button" />
</div>

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}


.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}
<div class="flex">
    <input type="button" class="flex-child" id="slide_start_button" value="Start">
    <input type="button" class="flex-child" id="slide_stop_button"  value="Stop">
</div>

A guide for flex can be found here, and support list here

Upvotes: 10

Matthew
Matthew

Reputation: 8416

Surprised no one mentioned this method yet:

The problem is the white-space between the two buttons is being rendered. Any white-space (line breaks, tabs, spaces) between the buttons will be rendered as a single space by the browser. To fix this, you can set the font-size to 0 on a parent element.

I've added DIV#button-container around the buttons and a style for it showing the font-size trick.

Note: I also had to change the positioning on the button background graphic you linked since it had some extra pixel space around it. Maybe this was part of the problem, maybe not.

Here's a link to the fiddle: http://jsfiddle.net/dHhnB/ and the code:

<style>
#button-container
{
   font-size:0;    
}
.PostBtn
{
   background: url(http://img22.imageshack.us/img22/5066/capturebtn.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: -4px 0;
}
#ProvBtn
{
   background-position: -59px 0px;
}
</style>
<div id="button-container">
    <input id="NeedBtn" class="PostBtn" type="button" />
    <input id="ProvBtn" class="PostBtn" type="button" />
</div>

Upvotes: 25

Pik&#39;
Pik&#39;

Reputation: 7077

The line feed between the two <input>s creates a space between them on the page. You have to remove the line feed, or use this trick : 

<input id="NeedBtn" class="PostBtn" type="button" /><!--
--><input id="ProvBtn" class="PostBtn" type="button" />

Upvotes: 83

vectran
vectran

Reputation: 1979

Try using a CSS reset - it may solve the browser discrepancy : http://meyerweb.com/eric/tools/css/reset/reset.css

Upvotes: 3

neatlysliced
neatlysliced

Reputation: 245

I see they have a set height and width. Adding overflow: hidden should hide the whitespace outside of your defined width. That is an alternative to eliminating the whitespace, as @Pikrass noted. Usually the whitespace is a IE problem, I've not noticed it in FF before.

Upvotes: 1

Related Questions