Защо се получава така

[smoke]

Здравейте,
имам една картинка която съм я поставил пред един инпут като е с същия стил като него и съм ги доближил до него така че да изглежда все едно че са заедно но когато натисна на input се получава разтояние между тях:

HTML:

                    <div id="login">
                    <div id="lenta_login">Вход</div>

                    <form action="" method="post"><table><tbody>
                        <tr><td><img alt="User" src="img/login/userImg.png" /><input type="text" name="user" value="Потребителско име" /></td></tr>
                    </tbody></table></form>

                    </div>

CSS:

#login {background: url('../img/login/bg.png'); width: 245px; height: 187px; padding-top: 5px;}
#lenta_login {background: url('../img/login/lenta.png'); width: 242px; height: 19px; color: #fff; font-weight: bold; font-size: 15px; padding-left: 3px;}
#login form table tr td input {height: 28px; font-size: 11px; color: #999; border: 1px solid black; width: 211px; padding-left: 2px; border-left: none;}
#login form table tr td img {float: left;}

Ето я и картинката:

 

[M1tq]

сложи ИД на точно определен input и му задаи background:url(snimkata); с точни размери,определи позицията и , и сложи падинг на текста зада не са буквите върху картинката..

 

[smoke]

да бе верно как не се сетих +1