Question

I came across a problem and I tried searching on google and here too, however, could not get the right solution. Let me be brief…

I have a div name #email_input_box which contains <input type="text" class="email_box" border="0" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />

The issue is in padding the text, it works fine in other browsers, however, it does not work in IE7.

Here’s my .email_box class styling

.email_box{
    width:160px;
    height:26px;
    background:url(images/inputbox_email.png) no-repeat;
    line-height:26px;
    color:#969595;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    font-style:normal;




}

and here’s my div #email_input_box styling

#email_input_box{
    width:180px;
    height:26px;
    float:left;
    position:absolute;
    top:60px;


}

I need help with the padding-right issue in IE7. Thanks!

Answer 1

input doesn’t have a border attribute, remove it.

<input type="text" class="email_box" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />

this may solve the problem. however even if it doesn’t, it should be removed.

Also the div containing the input have a less width than the input.