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