CODEWITHSUNDEEP
css
Wish
Wish

Reputation: 1614

Gap between input type text and input type button

ill show it as an image again :) enter image description here

I am designing a search box, but i have faced strange error.. My goal is to make input box and settings button to look as one. So i have styled them with borders. It would look OK, if only there wouldnt be a gap between those two elements.. And also button is 2px smaller than input box. Here is my css

form#search
{
}
input[type=text]
{
  width: 400px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: none;
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: 1px solid rgb(217, 217, 217);
  height: 50px;
}
input[type=button]
{
  font-family: 'WebSymbolsRegular';
  width: 40px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: 1px solid rgb(217, 217, 217);
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: none;
  background: white;
  height: 50px;
}
input[type=submit]
{
  font-family: 'WebSymbolsRegular';
  height: 50px;
}

And here is html, as requested by sachleen. Nothing special here..

<form id="search">
    <input type="text" name="search" placeholder="search" tabindex="1"/>
    <input type="button" value="S" tabindex="3"/>
    <input type="submit" value="L" tabindex="2"/>
</form>

I havent made any rules, to make those gaps. Adding margin or padding : 0, changes nothing. I am also using Eric Meyer’s “Reset CSS” 2.0 to reset css.

Upvotes: 0

Views: 10603

Answers (4)

Nathan Hornby
Nathan Hornby

Reputation: 1443

You were over thinking it!

<form id="search">
    <input type="text" name="search" placeholder="search" tabindex="1"/><input type="button" value="S" tabindex="3"/><input type="submit" value="L" tabindex="2"/>
</form>

Inline elements see white space in code. The above removes the spaces, quite literally.

For more info see here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 1

Wish
Wish

Reputation: 1614

This worked for me

form {
  border: 1px solid rgb(217, 217, 217);
  width: 598px;
  background: green;
  font-size:0;  

  input {
    padding: 0px;
    border: 0px;
    font-size:18px; 
    height: 30px;
    background: white; 
  }
  input[type='text'] {
    width: 498px;
  }
  input[type='button'], input[type='submit'] {
    width: 50px;
  }
}

Found ultimate sollution! And works the same on all browsers. Key - font-size: 0 on parent ontainer (form in this case), setting paddings to 0px, and same heights for all inputs. I set form width to 598 (+2 * 1 px border), and i can set input width to sum 598. Now i dont need to use fancy display: box and float: left to break everything.

Upvotes: 3

Vinod Vishwanath
Vinod Vishwanath

Reputation: 5891

Did some cheating(gave the button 2px extra), but this rather works, except for those images for settings/search:

http://jsfiddle.net/JLuyL/

The key is in the display property in CSS.

Upvotes: 0

defau1t
defau1t

Reputation: 10619

You are trying to merge two different input types into one, text and button. They have there different and custom properties so layout problems are sure to arise. That said you can use margin values on your button to adjust them but it wont be cross browser compatible.

Upvotes: 0

Related Questions