By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,874 Members | 1,028 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,874 IT Pros & Developers. It's quick & easy.

Please help, simple form display problems in IE

100+
P: 290
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:
Expand|Select|Wrap|Line Numbers
  1. <div class="formfill w3">
  2. <form name="regis" action ='index1.php' method = 'POST'>
  3. <div class="reg_table">
  4. <span style="font-size:20px; font-weight:bold; color:red;">Limited Time Offer.</span><br>
  5. <span style="font-size:16px; font-weight:bold; color:blue;">Grab all four bonuses absolutely free 
  6. and with no strings attached. Introductory special offer.</span><br>
  7. <span style="font-size:14px; font-weight:bold; color:red;">Sent Directly to your email.</span><br>
  8. <span><input type="hidden" name="reg" value="yes" ></span>
  9. <br><br>
  10. <span class="tab-cell-left" style="font-size:20px;">Your Name:</span>
  11. <span class="tab-cell-right"><INPUT name="x_name" value= '<?php echo "$N_name"; ?>' size="28" type="text"></span>
  12.  
  13. <span class="tab-cell-left" style="font-size:20px;">Email Address:</span>
  14. <span class="tab-cell-right"><INPUT name="x_email" value= '<?php echo "$N_email"; ?>' size="28" type="text"></span>
  15.  
  16. <input class="button2" type="submit" value="Give Me Free Access Now"/>
  17.  
  18. </div> <!-- END FORM TABLE -->
  19. </form>
  20.  
  21. <div class="spambox1">
  22.  We HATE spam as much as you do.
  23.  We value our relationship with you and will never share your email address or any other details with anyone else. 
  24.  Thats a promise.
  25. </div> <!-- END SPAM BOX -->
  26.  
  27. </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:

Expand|Select|Wrap|Line Numbers
  1. .formfill {
  2.   text-align: center;
  3.   border-style: dashed;
  4.     border-width: 3px;
  5.   border-collapse: collapse;
  6.     border-color: #9F0000;
  7.     background-color: #DEE4ED;
  8.     margin: 10px auto;
  9.     padding: 10px;
  10. }
  11.  
  12. .w1{
  13.     width: 520px;
  14. }
  15.  
  16. .w2{
  17.     width: 720px;
  18. }
  19.  
  20. .w3{
  21.     width: 400px;
  22.     height:380px;
  23.     float:right;
  24. }
  25.  
  26.  
  27. .spambox1 {
  28.     font-family: Arial; 
  29.   font-size: 12px; 
  30.     text-align: center;
  31.     border-collapse: collapse;
  32.   background-color:#a9a9a9;
  33.     border-color: #C0C0C0;
  34.     border-width: 2px;
  35.     height: 60px;
  36.     width: 400px;
  37.     margin: 30px auto;
  38.     padding: 3px 3px 3px 3px;
  39. }
  40.  
  41. .reg_table {
  42.   text-align: center;
  43.     margin: 0 auto;
  44. }
  45.  
  46. .tab-cell-spec {
  47.   width: 390px;
  48.     height: 30px;
  49.   float: left;
  50.   text-align: left;
  51.     font-weight: bold;     
  52. }
  53.  
  54. .tab-cell-left {
  55.   width: 140px;
  56.     height: 50px;
  57.   text-align: right;    
  58.     margin: 0px auto;
  59.     float: left;
  60. }
  61.  
  62. .tab-cell-right {
  63.   width: 180px;
  64.     height: 50px;
  65.     font-size:16px;
  66.   text-align: left;    
  67.   margin: 0 60px 0 0;
  68.     float: right;
  69. }
  70.  
  71. input.button2{
  72.   font-size: 14px;
  73.     font-family: Arial; 
  74.     letter-spacing: -1px; 
  75.     font-weight: bold; 
  76.     width: 360px; 
  77.     height: 40px;
  78.   border:3px outset #950000;
  79. }
  80.  
  81. .input_fm{
  82.   width: 900px;
  83.     font-weight: bold;
  84.     margin: 0px auto;
  85.     float: left;
  86. }
  87.  

The full css file is here:

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

Hopefully someone can see what I have done wrong.

thanks
Sep 9 '09 #1
Share this Question
Share on Google+
1 Reply


100+
P: 290
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
Sep 11 '09 #2

Post your reply

Sign in to post your reply or Sign up for a free account.