Please help, simple form display problems in IE

[jeddiki]

Hello,


I have made a nice opt-in form and tested it
in Moz FF and it looks fine.

But in IE the elements don't line up properly.

I think I am nearly there but can not get these elements
straight - can you see what I have missed ?

Here is a couple of screen shots.

In Moz FF:

And now in IE:

The code that I use for the form is here:

<div class="formfill w3">
<form name="regis" action ='index1.php' method = 'POST'>
<div class="reg_table">
<span style="font-size:20px; font-weight:bold; color:red;">Limited Time Offer.</span><br>
<span style="font-size:16px; font-weight:bold; color:blue;">Grab all four bonuses absolutely free 
and with no strings attached. Introductory special offer.</span><br>
<span style="font-size:14px; font-weight:bold; color:red;">Sent Directly to your email.</span><br>
<span><input type="hidden" name="reg" value="yes" ></span>
<br><br>
<span class="tab-cell-left" style="font-size:20px;">Your Name:</span>
<span class="tab-cell-right"><INPUT name="x_name" value= '<?php echo "$N_name"; ?>' size="28" type="text"></span>
 
<span class="tab-cell-left" style="font-size:20px;">Email Address:</span>
<span class="tab-cell-right"><INPUT name="x_email" value= '<?php echo "$N_email"; ?>' size="28" type="text"></span>
 
<input class="button2" type="submit" value="Give Me Free Access Now"/>
 
</div> <!-- END FORM TABLE -->
</form>
 
<div class="spambox1">
 We HATE spam as much as you do.
 We value our relationship with you and will never share your email address or any other details with anyone else. 
 Thats a promise.
</div> <!-- END SPAM BOX -->
 
</div> <!-- END FORM FILL -->

The only problem is that I can not completely re-write the css
because many other pages are using the css.

I justwould like to find out what element is making the form appear so bad in IE.

I only showed part of the page in the images above, the whole page can be seen here:

http://www.expert-world.com/im/index1.php

It looks nice in Moz FF but in IE it is not very good.

I have tried adjusting the width and padding of the
.tab-cell-right { in the css.

Although I could see changes in the Moz FF, the IE version did not change.

Ths css I use for the form is here:

.formfill {
  text-align: center;
  border-style: dashed;
    border-width: 3px;
  border-collapse: collapse;
    border-color: #9F0000;
    background-color: #DEE4ED;
    margin: 10px auto;
    padding: 10px;
}
 
.w1{
    width: 520px;
}
 
.w2{
    width: 720px;
}
 
.w3{
    width: 400px;
    height:380px;
    float:right;
}
 
 
.spambox1 {
    font-family: Arial; 
  font-size: 12px; 
    text-align: center;
    border-collapse: collapse;
  background-color:#a9a9a9;
    border-color: #C0C0C0;
    border-width: 2px;
    height: 60px;
    width: 400px;
    margin: 30px auto;
    padding: 3px 3px 3px 3px;
}
 
.reg_table {
  text-align: center;
    margin: 0 auto;
}
 
.tab-cell-spec {
  width: 390px;
    height: 30px;
  float: left;
  text-align: left;
    font-weight: bold;     
}
 
.tab-cell-left {
  width: 140px;
    height: 50px;
  text-align: right;    
    margin: 0px auto;
    float: left;
}
 
.tab-cell-right {
  width: 180px;
    height: 50px;
    font-size:16px;
  text-align: left;    
  margin: 0 60px 0 0;
    float: right;
}
 
input.button2{
  font-size: 14px;
    font-family: Arial; 
    letter-spacing: -1px; 
    font-weight: bold; 
    width: 360px; 
    height: 40px;
  border:3px outset #950000;
}
 
.input_fm{
  width: 900px;
    font-weight: bold;
    margin: 0px auto;
    float: left;
}
 

The full css file is here:

http://www.expert-world.com/im/guru.css

Hopefully someone can see what I have done wrong.

thanks

[jeddiki]

By the way,

I forgot to mention that the form looks fine
in Opera as well

It is jus IE that gives this funny problem.

Any ideas - or a solution ?

Thanks