Avatar of anthonytr
anthonytr
Flag for United Kingdom of Great Britain and Northern Ireland asked on

Web page not displaying correct in IE

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
CSSHTMLJoomla

Avatar of undefined
Last Comment
anthonytr

8/22/2022 - Mon
Chris Stanyon

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

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

ASKER
My bad - sorry.

I wasn't using .art.header.jpeg.  The header is working great now - thanks!
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
anthonytr

ASKER
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
SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Sam Simon Nasser

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
user_n

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

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

ASKER
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
Chris Stanyon

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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
anthonytr

ASKER
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

ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
anthonytr

ASKER
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