css bug on homepage

[burningTyger]

as seen on http://twitter.github.com/bootstrap/base-css.html

[sushaantu]

Any more information you might add. Don't think I have seen this issue in any browser.

[burningTyger]

I'm on current Chrome, Lion.

[Merg1255]

confirmed on firefox 11 and 13a1 and 12a2.

[JMayfield]

I'm on Lion 10.7.3 and Chrome 17.0.963.79 and I'm NOT seeing this bug.

EDIT: After a browser refresh, I'm seeing the bug as well.

[burningTyger]

Have you all RELOADED your browser to see 2.0.2?

[JMayfield]

Oh, burningTyger's correct. I'm seeing the bug, post reload.

[burningTyger]

seems to only affect <i> icon prepended forms.

[jubi4dition]

I got the same Problem :)
No matter if it's a icon. When i write it in the same line, there's no gap between prepend-input and input, but the prepend-input is still lower. I am not able to solve it :|

<div class="row">
<div class="span4">
<form accept-charset="utf-8">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input type="text" class="input-large">
</div>
<div class="input-prepend">
<span class="add-on">P</span><input type="password" class="input-large"/>
</div>
<a href="#" class="btn btn-primary btn-large">
<i class="icon-home icon-white"></i> Login</a>
</form>
</div>
</div>

[robflaherty]

Appears to be caused by margin-bottom: 9px on the adjacent input. Removing margin or setting vertical-align: top on the .add-on class resolves it.*

*ish

Edit: Ah, the form is missing one of the form clases that sets the margin-bottom to 0 on input elements.

Edit #2: @jubi4dition: I'm seeing the same thing, that the whitespace is causing the horizontal gap.

[robflaherty]

Adding display: inline-block here introduced the whitespace problem.
91eef35#diff-4

Is it expected that everyone knows inline-block elements respect whitespace? If so the fix is a simple docs edit. Just read the heads-up in the changelog about .add-on elements. Submitted pull request.

[jubi4dition]

I don't really understand, when i use form-inline, then input-prepend and input fit together, but there's no vertical gap between the two input fields.

[robflaherty]

Regarding the vertical spacing problem, adding form-inline was a hack for the documentation. Prepended and appended inputs should be fixed to work in vertical forms. Looks like it can be achieved in a few ways:

1. Set .add-on to vertical-align: top
2. Set bottom margin to 0 on vertical form inputs

Seems like both might be problematic...

[mdo]

Resolved in 2.0.3-wip by removing the margin on inputs in the prepend/append components. Thanks!