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

Discussion in 'CSS Forum' started by Gravelcrusher, Apr 10, 2013.

  1. Gravelcrusher

    Gravelcrusher New Member

    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:\[code\]<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>\[/code\]Style:\[code\] 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>\[/code\]My live site misalignment:[​IMG]Also, why do I get this another border inside input if I set background?
     

Share This Page