troubleshooting Question

Web page not displaying correct in IE

Avatar of anthonytr
anthonytrFlag for United Kingdom of Great Britain and Northern Ireland asked on
CSSHTMLJoomla
13 Comments2 Solutions501 ViewsLast Modified:
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>

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
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros