Hello Everyone,

I've made a web page which you can see here that works fine on every major browser EXCEPT IE. In IE the contact form doesn't show. Here's the code:

<!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"></script>
    <script>
$(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;
    margin-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="https://www.paypal.com/cgi-bin/webscr" 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" /></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'] . "\n";
$message .= $_POST['phone'] . "\n";
$message .= $_POST['email'] . "\n";
$message .= $_POST['cname'] . "\n";
$message .= $_POST['age'] . "\n";
$message .= $_POST['concerns'] . "\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 
{   
?>
    <form  method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
   <table width="138" border="0" cellspacing="5px">
  <tr>
    <td width="132"><div align="left">
      <input name="pname" type="text" id="pname" name="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" name="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" name="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" name="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" name="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: 
      </textarea>
    </div></td>
  </tr>
  <tr>
    <td><div align="left">
      <textarea name="skills" id="skills" name="skills" cols="40" rows="5">Skills to Improve Upon:
      </textarea>
    </div></td>
  </tr>
  <tr>
  <td><input class="button" type="submit" value="submit" name="submit" alt="register" /></td>
  </tr>
</table>

    </form>
    <?php
}
?>
    </div>
    <div
  </div>
    </div>


</body>
</html>

Can someone please help me with this? Thanks for your time and effor tin advance.

--David

Recommended Answers

All 3 Replies

Check your tags on line 207. IE doesn't handle malformed HTML very well.

I've eliminated that open div at the end of the page but the form still doesn't show in IE.

Hello again,

Firstly, that's very cheeky to contact me via my business to ask for help! I'll be sure to send you an invoice ;)

But as it happens, you caught me in a giving mood, so I thought I'd have another quick look. Seems your site works in IE8 and IE9, but is failing in IE6 and IE7.

The problem is a combination of things. IE6 and IE7 both suffer from a bug when applying a margin to a floating element in that it doubles the margin size. Your #left and #right divs, were suffering from this issue, which was causing the #right div to render underneath the #left div.

This was further compounded by the fact that your #bottom back div had the content overflow hidden, hence you couldn't see the form.

I've modified your CSS to apply a fix for the float / margin bug - simply add display:inline; to floating elements. And I've also set a width for the #right div.

New code posted below. Note I have added absolute URLs to images so that they rendered in my local copy.

<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></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(http://www.ezaspi.org/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(http://www.ezaspi.org/images/welcome.gif);
            }
            #right {
                float: left; display:inline;
                margin-left:10px;
                margin-top: 30px;
                width:272px;
            }
            #left {
                float:left; display:inline;
                width:498px; 
                margin-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(http://www.ezaspi.org/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="http://www.ezaspi.org/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="https://www.paypal.com/cgi-bin/webscr" 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="http://www.ezaspi.org/images/ez_as_pie_address.gif" />
                </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'] . "\n";
                            $message .= $_POST['phone'] . "\n";
                            $message .= $_POST['email'] . "\n";
                            $message .= $_POST['cname'] . "\n";
                            $message .= $_POST['age'] . "\n";
                            $message .= $_POST['concerns'] . "\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='http://www.ezaspi.org/images/check.png'>";
                        else:
                    ?>

                    <form  method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                            <table width="138" border="0" cellspacing="5px">
                                <tr>
                                <td width="132">
                                    <div align="left">
                                            <input name="pname" type="text" id="pname" name="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" name="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" name="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" name="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" name="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:</textarea>
                                    </div>
                                </td>
                                </tr>
                                <tr>
                                <td>
                                    <div align="left">
                                            <textarea name="skills" id="skills" name="skills" cols="40" rows="5">Skills to Improve Upon:</textarea>
                                    </div>
                                </td>
                                </tr>
                                <tr>
                                    <td><input class="button" type="submit" value="submit" name="submit" alt="register" /></td>
                                </tr>
                        </table>
                    </form>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </body>
</html>

Have a good weekend.
R.

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.