input field width is not what I set it to be, misaligned. Additional border in input

Question

http://jsfiddle.net/HnnHf/1/

Trying to understand what I do wrong. Plain table, I want input boxes to fill cells evenly. On first row you see 2 inputs and second row has one input spanned across cells.

Their right sides don't match. Why? When I run inspector it shows additional pixels?

Part of my HTML:

<div style="width: 1000px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-top: 10px;">
            <table>
                <tr>
                    <td style="width: 80px;"><label>From&nbsp;</label></td>
                    <td style="width: 120px;">
                        <input type="text" class="fill-space" />
                    </td>
                    <td style="width: 80px;"><label>To&nbsp;</label></td>
                    <td style="width: 120px;">
                        <input type="text" class="fill-space" />
                    </td>
                    <td style="width: 80px;"><label>Sort by&nbsp;</label></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="6">&nbsp;</td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="3">
                        <input type="text" class="search" />
                    </td>
                    <td></td>
                    <td>
                        Refresh button
                    </td>
                </tr>
            </table>
        </div>

Style:

    td label {
        width: 100%;
        color: #F1F1F1;
        text-align: right;
        vertical-align: central;
    }

    input.fill-space {
        width: 100%;
    }

    input.search {
        width: 100%;
        background-image: url("/images/Search.png");
        background-position: right center;
        background-repeat: no-repeat;
    }
</style>

My live site misalignment:

Also, why do I get this another border inside input if I set background?

Answer 1

Working fiddle: http://jsfiddle.net/ghUEw/

Default padding and margins for table elements differ in different browsers. So you'd better use a CSS reset on table elements.

table * {
    margin: 0;
    padding: 0;
}

Then, comes the border-collapse property. It determines whether the table borders are collapsed into a single border or rendered individually, let's say for neighboring table cells. You need to set it as following to make them collapsed since you have different number of cells per table row.

table {
    border-collapse: collapse;
}

Then, you need to set the borders of the inputs in your table if you want them look the same.

table input {
    border: 1px solid #aaa;
}

If you don't want any borders to appear, replace it with border: none;

Then, in your CSS, for the labels to appear the way you want, you can apply float:right; (also corrected vertical-align: middle;)

td label {
    width: 100%;
    color: #F1F1F1;
    text-align: right;
    vertical-align: middle;
    float:right;
}