Web page not displaying correct in IE

anthonytr
anthonytr used Ask the Experts™
on
Hi,

I have been working on a website and have noticed that a few things are not working correctly in IE although they are working perfectly in FF.  I think its down to CSS code, but i cant seem to find out where i'm going wrong, or what I need to do to make it display correctly in IE.  This is the test site Test Site

It is a Joomla site and i have added two module positions in the header section like so:

<body>
<div id="art-main">
    <div class="cleared reset-box"></div>
<div class="art-box art-sheet">
    <div class="art-box-body art-sheet-body">
<div class="art-header">
<div class="art-header-jpeg"><div id="onlinelinks"><jdoc:include type="modules" name="onlinelinks" style="art-block" /></div></div>
<div class="art-header"><div id="sitesearch"><jdoc:include type="modules" name="sitesearch" style="art-block" /></div></div>
<div class="art-headerobject"></div>
<div class="art-logo">
 <h1 class="art-logo-name"><a href="<?php echo $document->baseurl; ?>/"><?php echo $this->params->get('siteTitle'); ?></a></h1>
 <h2 class="art-logo-text"><?php echo $this->params->get('siteSlogan'); ?></h2>
</div>

The Site Search and OnlineLinks are the two new module positions.  There CSS code is:

#sitesearch
{
  position:relative;
  float: left;
  margin: 15px 10px 10px 790px;
}

#onlinelinks
{
  position:relative;
  float: right;
margin-top: 5px;
}

The Form at the bottom of that page has the following code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head><body><p><link rel="stylesheet" type="text/css" media="all" href="WebToLeadForm_1330953696_DIGITAL_files/WebToLeadForm_1330953696.html"><script type="text/javascript" src="WebToLeadForm_1330953696_DIGITAL_files/sugar_grp1.htm"></script><script type="text/javascript" src="WebToLeadForm_1330953696_DIGITAL_files/calendar.htm"></script></p><form action="http://crm.mycrm.com/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" method="POST" id="WebToLeadForm">
<body>
<table width="955" height="392" border="0" cellpadding="0" cellspacing="0" background="/images/take_the_next_step.jpg">
  <tr>
    <td colspan="4">&nbsp;</td>
    <td colspan="2" rowspan="2" class="style8"><p align="left" class="style1">Please fill in the form below to have an Archive Services Representative contact you.</p></td>
  </tr>
  <tr>
    <td height="57" colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td width="247" class="style8">First Name:</td>
    <td width="234" class="style8">Last Name:</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td><label>
      <input name="first_name" type="text" class="input_style" id="first_name" />
    </label></td>
    <td><input name="last_name" type="text" class="input_style2" id="last_name" /></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td class="style8">Company:</td>
    <td class="style8">E-Mail:</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td class="style8"><input name="account_name" type="text" class="input_style" id="account_name" /></td>
    <td class="style8"><input name="webtolead_email1" type="text" class="input_style" id="webtolead_email1" /></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td class="style8">Phone:</td>
    <td class="style8">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td><input name="phone_work" type="text" class="input_style" id="phone_work" /></td>
    <td><input onClick="submit_form();" class="button" name="Submit" value="Submit" type="button"></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td class="style8">&nbsp;</td>
    <td class="style8">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="20" colspan="4">&nbsp;</td>
    <td><label></label></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td colspan="2" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="114" height="60" class="mceItemTable" style="display: none;" mce_style="display: none"><input id="campaign_id" name="campaign_id" value="116d6c7c-1586-3cdc-51c2-4f54bd56e1f2" type="hidden"></td>
    <td width="117" class="mceItemTable" style="display: none;" mce_style="display: none"><input id="assigned_user_id" name="assigned_user_id" value="a73276d6-41b3-4245-2da0-4df5ee7938d7" type="hidden"></td>
    <td width="86" class="mceItemTable" style="display: none;" mce_style="display: none"><input id="req_id" name="req_id" value="last_name;account_name;phone_work;" type="hidden"></td>
    <td width="172" colspan="1" class="mceItemTable" style="display: none;" mce_style="display: none"><input name="redirect_url" type="hidden" id="redirect_url" value="http://demo.archiveservices.co.uk/Customer-Services/thank-you.html"></td>
  </tr>
</table>
</form><p><script type="text/javascript"><!--
 function submit_form(){
 	if(typeof(validateCaptchaAndSubmit)!='undefined'){
 		validateCaptchaAndSubmit();
 	}else{
 		check_webtolead_fields();
 	}
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Please provide all the required fields');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
	if(document.getElementById('webtolead_email1').value.length >0) {
		if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
	if(document.getElementById('webtolead_email2').value.length >0) {
		if(document.getElementById('webtolead_email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
}
// --></script></p></body></html>

Open in new window


and the CSS is:

.style1 {
      font-family: Verdana, Arial;
      color: #FFFFFF;
      font-size: 14px;
}
.style3 {
      font-family: Verdana, Arial;
      color: #CC0000;
      font-size: 12px;
}
.style8 {
      color: #FFFFFF;
      font-weight: bold;
      font-family: Verdana, Arial;
      font-size: 12px;
10;10;10;
}
.style9 {
      color: #666666;
      font-weight: bold;
      font-family: Verdana, Arial;
      font-size: 14px;
}
.input_style1 {
      font-family: Verdana, Arial;
      color: #666666;
      -moz-border-radius: 3px;
}
.input_style {padding: 3px;border: solid 1px #E5E5E5;outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF url('../images/bg_form.png') left top repeat-x;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));    background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-border-radius: 3px;-webkit-border-radius: 3px; height: 18px;}
.rcinputbox:focus{ border:1px solid #0099FF;}
       }
.rctextarea {
      padding: 3px;
      border: solid 1px #E5E5E5;
      outline: 0;
      font: normal 13px/100% Verdana, Tahoma, sans-serif;
      background: #FFFFFF url('../images/bg_form.png') left top repeat-x;
      background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));
      background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);
      box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      height: 75px;
      line-height: 150%;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
}

.rcradiogroup {margin-bottom: 9px;}
.rcradio{}
.rctextarea1 {      padding: 3px;
      border: solid 1px #E5E5E5;
      outline: 0;
      font: normal 13px/100% Verdana, Tahoma, sans-serif;
      background: #FFFFFF url('../images/bg_form.png') left top repeat-x;
      background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));
      background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);
      box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
      height: 75px;
      line-height: 150%;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
}
.input_style2 {padding: 3px;border: solid 1px #E5E5E5;outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF url('../images/bg_form.png') left top repeat-x;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));    background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-border-radius: 3px;-webkit-border-radius: 3px; height: 18px;}
.input_style3 {padding: 3px;border: solid 1px #E5E5E5;outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF url('../images/bg_form.png') left top repeat-x;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));    background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-border-radius: 3px;-webkit-border-radius: 3px; height: 18px;}
.input_style4 {padding: 3px;border: solid 1px #E5E5E5;outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF url('../images/bg_form.png') left top repeat-x;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));    background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-border-radius: 3px;-webkit-border-radius: 3px; height: 18px;}
.input_style5 {padding: 3px;border: solid 1px #E5E5E5;outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF url('../images/bg_form.png') left top repeat-x;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #eeeeee), to(#FFFFFF));    background: -moz-linear-gradient(top, #FFFFFF, #eeeeee 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-border-radius: 3px;-webkit-border-radius: 3px; height: 18px;}


Sorry for the long post - i'm really pulling my hair out on this one.  I think i've fixed it and then somethings else is changed.

Really hope someone can help.

Regards
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
To get your top links showing add a rule for the div art-header-jpeg and set overflow to hidden.

.art-header-jpeg { overflow:hidden; }

As for the footer, I'm not really sure!. You might want to consider stepping away from tables for layout and go with DIVs. You could probably do the whole footer form layout with 3 DIVS / Elements.

Unless you set specific widths for all columns in a table, the browser will automatically resize the columns to fill any unused space. This seems to be the case on your site.

Author

Commented:
No joy I'm afraid.  

I can't seem to find a DIV id in the template CSS file called :

.art.header-jpeg

so dont know where to put the Overflow:Hidden element.

Author

Commented:
My bad - sorry.

I wasn't using .art.header.jpeg.  The header is working great now - thanks!
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Could you point me in the right direction with regards to changing my table/form at the bottom so that it uses DIV tags instead?

thanks again,

A
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Something like this should get you started:

//html
	<div id="footerFormWrapper">
		<p>Please fill in the form below to have an Archive Services Representative contact you.</p>
		
		<form id="footerForm">
			
			<div class="fieldWrapper">
				<label for="field1">Label 1</label>
				<input type="text" name="field1" />
			</div>

			<div class="fieldWrapper">
				<label for="field2">Label 2</label>
				<input type="text" name="field2" />
			</div>

			<div class="fieldWrapper">
				<label for="field3">Label 3</label>
				<input type="text" name="field3" />
			</div>

			<div class="fieldWrapper">
				<label for="field4">Label 4</label>
				<input type="text" name="field4" />
			</div>

			<div class="fieldWrapper">
				<label for="field5">Label 5</label>
				<input type="text" name="field5" />
			</div>

			<input type="submit" value="submit" />

		</form>		
		
	</div>

Open in new window


//css
#footerFormWrapper { background: url(/images/take_the_next_step.jpg) no-repeat left top red; width: 915px; height:352px; padding: 20px; color: white; font-size: 14px; }
#footerFormWrapper p { width: 450px; float:right; margin-bottom:20px; }
#footerForm { float:right; width: 450px; clear:right; }
.fieldWrapper { float:left; width: 225px; margin-bottom: 20px; }

Open in new window


Just a rough idea, so you'll need to style it yourself.
Sam Simon NasserIT Support Professional

Commented:
simple answer: in the template.xml ,,, put this line
<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> 

Open in new window

and that should fix it. i works a lot for me

Commented:
Please validate your page and correct the mistakes in the html code. I have seen such problem in my page which  was not correctly written. You can validate your page by using FF add on web developer. After installing it, in menu Tools|Web Developer|Tools you can validate your page. Try to do this and see if the problem still exists.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
'Fixing' a table based layout seems a little redundant - if you're going to put the effort in, then it makes sense to put the effort into best-practice, which is not to use tables for layouts in the first place.

If you decide later on that you want a slightly different layout, then you will cause yourself a lot of extra work if you have to start editing table based layout, when a few CSS changes would do the job if it does right to start with.

Whether you stick to table based layouts or switch to CSS layouts, I do agree with user_n - validate your code before publishing your site.

Author

Commented:
Hi,

I have tried to create the form using the suggested DIVs, but i can't get the form to work,  Each time I run the code validator and fix the error, it throws up another one :(

This is what i have:

<p><link rel="stylesheet" type="text/css" media="all" 

href="WebToLeadForm_1330953696_DIGITAL_files/WebToLeadForm_1330953696.html"><script type="text/javascript" 

src="WebToLeadForm_1330953696_DIGITAL_files/sugar_grp1.htm"></script><script type="text/javascript" 

src="WebToLeadForm_1330953696_DIGITAL_files/calendar.htm"></script></p>

<form>
<div id="footerFormWrapper">

		<p>Please fill in the form below to have an Archive Services Representative contact you.</p>
		
		<form action="http://crm.myCRM.com/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" 

method="POST" id="WebToLeadForm">
			
			<div class="fieldWrapper">
				<label for="first_name">First Name</label>
				<input type="text" name="first_name" />
			</div>

			<div class="fieldWrapper">
				<label for="last_name">Last Name</label>
				<input type="text" name="last_name" />
			</div>

			<div class="fieldWrapper">
				<label for="account_name">Company</label>
				<input type="text" name="account_name" />
			</div>

			<div class="fieldWrapper">
				<label for="webtolead_email1">Email</label>
				<input type="text" name="webtolead_email1" />
			</div>

			<div class="fieldWrapper">
				<label for="phone_work">Telephone</label>
				<input type="text" name="phone_work" />
			</div>
 
			<input onClick="submit_form();" class="button" name="Submit" value="Submit" type="button"/>
</form>
</div>
<div class="displaynone">
<input id="campaign_id" name="campaign_id" value="116d6c7c-1586-3cdc-51c2-4f54bd56e1f2"/>
<input id="assigned_user_id" name="assigned_user_id" value="a73276d6-41b3-4245-2da0-4df5ee7938d7"/>
<input id="req_id" name="req_id" value="last_name;account_name;phone_work;"/>
<input name="redirect_url" id="redirect_url" value="http://demo.archiveservices.co.uk/Customer-Services/thank-

you.html"/>

</div>
<p><script type="text/javascript"><!--
 function submit_form(){
 	if(typeof(validateCaptchaAndSubmit)!='undefined'){
 		validateCaptchaAndSubmit();
 	}else{
 		check_webtolead_fields();
 	}
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields

[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Please provide all the required fields');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
	if(document.getElementById('webtolead_email1').value.length >0) {
		if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w

{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
	if(document.getElementById('webtolead_email2').value.length >0) {
		if(document.getElementById('webtolead_email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w

{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
}
// --></script></p>

Open in new window


An example of this form is here: Form
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
The code you've posted above is different to the code on the page link you've provided. The code on the page link is simply copied and pasted from my code, which was not meant to be copied and pasted - it was simply a guideline on how to layout your form using DIVs instead of tables.

When you run your page against the validator it will tell you exactly what errors and warnings you have - http://validator.w3.org/

At the moment, it's showing 1 error and 6 warnings. The error is because you don't have an ACTION attribute to your FORM (<form action="your_script.php" method="POST" id="yourForm">) and the warnings are because you don't have any IDs on your text inputs (<input type="text" name="yourField" id="yourField" />).

As to whether your form is working or not, that's an entirely different issue to the layout. At first glance at your code above, you don't have any IDs on your Inputs. Also there are 4 hidden inputs that are sat outside of the FORM tags. They should be inside the form tags. If your form was working before and now it isn't, then check the names and IDs of your Text Boxes, check the ACTION and METHOD attributes of your form, as well as the ID of your FORM.

You also have an extra <form> tag just before your #footerFormWrapper DIV.

Author

Commented:
Hi,

I was starting from scratch when you must have looked at the form online.  I have new code on the form similar to the previous code i submitted, but i can't see where things are going wrong.  I have copied and pasted the forms ACTION and METHOD from my exisiting working forms.

The HTML Validator isn't showing anything with the forms code...

<p><link rel="stylesheet" type="text/css" media="all" 

href="WebToLeadForm_1330953696_DIGITAL_files/WebToLeadForm_1330953696.html"><script type="text/javascript" 

src="WebToLeadForm_1330953696_DIGITAL_files/sugar_grp1.htm"></script><script type="text/javascript" 

src="WebToLeadForm_1330953696_DIGITAL_files/calendar.htm"></script></p>

<div id="footerFormWrapper">

		<p>Please fill in the form below to have an Archive Services Representative contact you.</p>
		
		<form action="http://crm.archivecrm.com/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" 

method="POST" id="WebToLeadForm">
			
			<div class="fieldWrapper">
				<label for="first_name">First Name</label>
				<input type="text" name="first_name" id="first_name" />
			</div>

			<div class="fieldWrapper">
				<label for="last_name">Last Name</label>
				<input type="text" name="last_name" id="last_name" />
			</div>

			<div class="fieldWrapper">
				<label for="account_name">Company</label>
				<input type="text" name="account_name" id="account_name" />
			</div>

			<div class="fieldWrapper">
				<label for="webtolead_email1">Email</label>
				<input type="text" name="webtolead_email1" id="webtolead_email1" />
			</div>

			<div class="fieldWrapper">
				<label for="phone_work">Telephone</label>
				<input type="text" name="phone_work" id="phone_work" />
			</div>
 
			<input onClick="submit_form();" class="button" name="Submit" value="Submit" type="button"/>

			
			<div class="displaynone">
			<input id="campaign_id" name="campaign_id" value="116d6c7c-1586-3cdc-51c2-4f54bd56e1f2"/>
			</div>

			<div class="displaynone">
			<input id="assigned_user_id" name="assigned_user_id" value="a73276d6-41b3-4245-2da0-4df5ee7938d7"/>
			</div>

			<div class="displaynone">
			<input id="req_id" name="req_id" value="last_name;account_name;phone_work;"/>
			</div>

			<div class="displaynone">
			<input name="redirect_url" id="redirect_url" value="http://demo.archiveservices.co.uk/Customer-Services/thank-you.html"/>
			</div>
			
			</form>
</div>

<p><script type="text/javascript"><!--
 function submit_form(){
 	if(typeof(validateCaptchaAndSubmit)!='undefined'){
 		validateCaptchaAndSubmit();
 	}else{
 		check_webtolead_fields();
 	}
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields

[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Please provide all the required fields');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
	if(document.getElementById('webtolead_email1').value.length >0) {
		if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w

{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
	if(document.getElementById('webtolead_email2').value.length >0) {
		if(document.getElementById('webtolead_email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w

{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
}
// --></script></p>

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Your form layout is not looking right because you have no styling in place for a form with an ID of #WebToLeadForm. You need something like this in your CSS

#WebToLeadForm {
   float:right;
   clear:right;
   width: 500px;
}

Also, you have some inputs which I assume you want hidden (you have them wrapped in a DIV with a class of displaynone), but you have no rule in your CSS for this Class. The correct way to hide inputs on a form is to set their type to Hidden

<input type="hidden" value="116d6c7c-1586-3cdc-51c2-4f54bd56e1f2" name="campaign_id" id="campaign_id" />

You don't need to wrap them in their own DIV - just make sure they are inside the <form> element.

You also have some javascript errors, but like I said, that's a completely different issue to the layout of your form, and has nothing to do with CSS.

Author

Commented:
Hi Chris,

Thank you for your great advice.  I've finally got things working.  As you can probably tell, working with DIVs is something new to me.

A

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial