Question

ill show it as an image again 🙂

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.

Answer 1

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.