Hello Hello,

I'm looking for some quick help if possible. I have webpage up that works perfectly except in IE. In IE the contact form won't even show. I have no idea what the problem is. If someone would take a loook and provide assitance I would be oh so appreciative. Thanks a bunch.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Mrs. Ward's Easy as Pi Summer Math Camp</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function () {
    $('textarea').focus(function () {
        defaultText = $(this).val();
        $(this).val('');
    });
    $('textarea').blur(function () {
        if ($(this).val() == "") {
            $(this).val(defaultText);
        }
    });
});
</script>
    <!--[if IE]>
    <style type="text/css" media="all">.borderitem {border-style: solid;}</style>
    <![endif]-->
<style type="text/css">
body {
    background-color: #009;
    margin: 0;
    padding: 0;
}
body * {
    font-size: 100%;
}
img {
    display:block;
    margin:0 auto;
}
div.clearFloat {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0px;
}
.clearFloat {
    clear: both;
}

#main {
    margin: 0 auto;
    width: 800px;
}
#top {
    margin-left: 0px;
    margin-top: 0px;
    display: block;
    margin-bottom: 0;
    width: 800px;
}
#bottom_back {
    margin-left: 0px;
    margin-top: 0px;
    background-image: url(images/bottom_back.gif);
    overflow: hidden;
    display: inline;
    float: left;
    height: 498px;
    margin-bottom: 0;
    width: 800px;
}
#welcome {
    width:499px;
    height:298px;
    background-image:url(images/welcome.gif);
}

#right {
    float: left;
    margin-left: 10px;
    margin-top: 30px;
}
#left {
    float:left;
    width:498px;
    padding-left:20px;
}
.paypal {
    margin-left:150px;
    padding-top:240px;
}
input, textarea {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color:#006;
    color:#CCC;
}
.button {
    padding:0;
    background-color:transparent;
    background-image: url(images/register_button.jpg);
    text-indent:1000px;
    width:133px;
    height:51px;
    border:0;
    cursor:pointer;
}

#thanks {
    text-align:center;
    color:#006;
    font-family:"Arial Black", Gadget, sans-serif;
}

.thanks {  }
</style>
</head>

<body>

<div id="main">
<div id="top">
    <img src="images/ez_as_pie_top.gif" width="800" height="701" alt="easy as pie summer math camp" />
</div>
    <div id="bottom_back">
    <div id="left">
      <div id="welcome"><form class="paypal"action="" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="PCN4YXX7BAKFW">
<input style=
"background-color:transparent"
type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      </form>
      </div>
      <img style="margin-top:5px" src="images/ez_as_pie_address.gif" alt="Greater Roseland Community Center" /></div>
    <div id="right">
      <?php
if (isset($_POST['submit']))
{
$to = "mtech.websites@gmail.com";
$subject = "New Register for Math Camp";
$message = "From: ";
$message .= $_POST['pname'] . "\r\n";
$message .= $_POST['phone'] . "\r\n";
$message .= $_POST['email'] . "\r\n";
$message .= $_POST['cname'] . "\r\n";
$message .= $_POST['age'] . "\r\n";
$message .= $_POST['concerns'] . "\r\n";
$message .= $_POST['skills'];

mail ($to, $subject, $message);

echo "<p style='text-align:center;color:#006; font-family: Arial, Helvetica, sans-serif; font-weight:bold; margin-right:15px'> Thank you for registering<br/> Your child will be in good hands.</p>";
echo "<img src='images/check.png'>";

} else {    
php?>
    <form  method="post" action="<?php echo $_SERVER['PHP_SELF']; php?>">
   <table width="138" border="0" cellspacing="5px">
  <tr>
    <td width="132"><div align="left">
      <input name="pname" type="text" id="pname"  value="Parent's Name" size="35" onblur="if (this.value == '') {this.value = 'Parent\'s Name';}"  onfocus="if (this.value == 'Parent\'s Name') {this.value = '';}"/>
    </div></td>
  </tr>
  <tr>
    <td><div align="left">
      <input name="email" type="text" id="email" value="Email" size="35" onblur="if (this.value == '') {this.value = 'Email';}"  onfocus="if (this.value == 'Email') {this.value = '';}" />
    </div></td>
  </tr>
  <tr>
    <td><div align="left">
      <input name="phone" type="text" id="phone" value="Phone" size="35" onblur="if (this.value == '') {this.value = 'Phone';}"  onfocus="if (this.value == 'Phone') {this.value = '';}" />
    </div></td>
  </tr>
  <tr >
    <td><div align="left">
      <input name="cname" type="text" id="cname"  onfocus="if (this.value == 'Child\'s Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Child\'s Name';}" value="Child's Name" size="35" />
    </div></td>
  </tr>
  <tr>
    <td><div align="left">
      <input name="age" type="text" id="age"  onfocus="if (this.value == 'Age') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Age';}" value="Age" size="10" />
    </div></td>
  </tr>

  <tr>
    <td><div align="left">
      <textarea  id="concerns" name="concerns" cols="40" rows="5">Math Challenges/Concerns: 

Dani AI

Generated

Quick diagnostic notes for (and following ’s question about IE9). When a page renders correctly in remote testers but not in a local IE instance, the difference usually comes from one of these: the server-side HTML/PHP not being delivered to that browser, IE running in a Compatibility/old document mode, local security/script settings blocking resources, or an IE-specific CSS/layout interaction that clips or hides the form.

First, confirm the form HTML actually reaches IE9. Open the page source (View Source) and search for the form/input markup, then open Developer Tools (F12) and inspect the live DOM. If the source still contains raw PHP or unexpected text instead of generated HTML, the page was not served by PHP (this happens when opening a file:// URL instead of ). If the form exists in the DOM but is invisible, the next items apply.

IE’s Compatibility View / Document Mode can force older rendering. Check F12 -> Document Mode and Browser Mode (ensure “IE9 standards” / “Edge” style). To force the latest mode add this near the top of the head section:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Also check Tools -> Compatibility View Settings (uncheck “Display intranet sites in Compatibility View” if set), and confirm Active Scripting isn’t blocked (Security settings).

If the DOM contains the form but it’s not visible, inspect computed styles for display, visibility, opacity, z-index and parent overflow/height rules (a fixed-height parent with overflow:hidden can clip content differently in IE). Use the F12 style pane to toggle rules off and watch the element reappear. Check the Console for JS errors that might abort execution before the form is shown.

Compact checklist:

  • Verify page served over HTTP and PHP is processed.
  • Compare View Source vs DOM in F12.
  • Check Document Mode / Compatibility View and add the X-UA-Compatible meta.
  • Look for JS errors or blocked scripts.
  • Inspect computed CSS (display/overflow/z-index).
  • Test IE with add-ons disabled or on another machine to rule out local config.

Recommended Answers

All 3 Replies

Which version of IE are you having a problem in?

I have IE 9 on my PC on Windows 7

Amended question. When I test on IE9 on my Windows 7 PC I can't see the form, but I can when I use online browser testing tools. ANyone know what that is about?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.