HTML|CSS: Space between input buttons

user_400861 0
Viewed 70758

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

css html
6 Answers

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" />
user_2522600
user_2534820

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.

user_2540690
Related