0

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

2
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by blocblue
0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.