the possible solution to this design issue??

Question

I need to know how to fix this issue in the designs of forms.. Getting this in firefox

and this in IE...

the color is not an issue.. juz need the alignment to be fixed...

The code goes like this :

<div class="content_form_box7_main">
<div class="content_form_box7_main1">
<input type="text" name="email" value="Comments" class="content_form_box7_inside"/>
</div>
</div>

the style goes like :

.content_form_box7_main{
    float:left; 
    color:#FFFFFF; 
    padding:5px 0px 2px 0px; 
    width:281px;
}
.content_form_box7_main1{
    float:left; 
    padding:0px 0px 0px 40px;
}
.content_form_box7_inside{
    float:left; 
    background-image:url(images/amcro_contact4.gif); 
    width:206px; 
    height:43px; 
    background-repeat:no-repeat; 
    border:none; 
    background-color:#E0D1B4; vertical-align:top;
}

apologies if it looks complex ...

Answer 1

What does your CSS look like? Have you tried adding the following to the input elements?:

vertical-align: middle; 

or

vertical-align: 50%;

Answer 2

vertical-align style in input tag is browser dependent. My advice will get over it.
Remove height value.

Answer 3

You need to add padding to the input elements.

Answer 4

thanks people I guess I found out the solution myself....