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 </label></td> <td style="width: 120px;"> <input type="text" class="fill-space" /> </td> <td style="width: 80px;"><label>To </label></td> <td style="width: 120px;"> <input type="text" class="fill-space" /> </td> <td style="width: 80px;"><label>Sort by </label></td> <td></td> </tr> <tr> <td colspan="6"> </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:
Also, why do I get this another border inside input if I set background?