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
- <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 -->
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
- .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