align input text with label in my Search gadget

Question

hi,

I would like to align the label of my search widget with the input text (they are slightly not aligned on all browsers). Any css tip ? thanks

This is my code:

<label for="edit-search" style="float: left;">Search</label>
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>

Answer 1

<div style="position:relative;left:-10px;top:25px;">
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>

The position relative will make the widget display where it should be in the natural document flow, then the left and top properties shift the widget around from that position. You are allowed negative values as there is no right and bottom property.

Answer 2

The solution is tuning the line-height values attributes.