Torrent of Flame
06-23-2009, 10:26 PM
My code is working perfectly fine in FF, but when I try it in Internet Explorer 7 it is not working. My website is www.definition-designs.co.uk
I have checked with W3C my code on the Index page and the CSS page, index page getting XHTML 1.1 and CSS validating at CSS 2.1.
On the Index page on FF, the padding works at the bottom and top on the navbar, but in IE7 it only pads the top and not the bottom. My index.html code is;
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Definition Designs - Web and Graphics Design</title>
<meta name="Author" content="Joshua Martin" />
<meta name="Description" content="Definition Designs is the website of Web and Graphic Designer Joshua Martin" />
<link href="/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header-text">
definition<div id="z">designs</div>
</div>
</div>
<div id="navbar">
<ul>
<li><a href="/index.html">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">tutorials</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
</div>
<div id="mainContent">
<p>Lorem ipsum boring gypsum.</p>
</div>
</body>
</html>
On my contact.php page, it works fine in FF again, but in IE7 the div is pushed to the left and does not center. Also, the navbar becomes distorted in IE. My contact.php page code is this, and as far as I know, this isnt a PhP error, this is a problem with my divs. (I am not very good at PhP, but it works fine for me);
<?php
$recipient = 'defenitiondesigns@googlemail.com';
$serverName = 'www.definition-designs.co.uk';
if ($_POST['send']) {
sendMail();
} elseif (($_POST['cancel']) || ($_POST['continue'])) {
redirect();
} else {
displayForm();
}
function displayForm($messages = array())
{
global $login;
$escapedEmail = htmlspecialchars($_POST['email']);
$escapedRealName = htmlspecialchars($_POST['realname']);
$escapedSubject = htmlspecialchars($_POST['subject']);
$escapedBody = htmlspecialchars($_POST['body']);
$returnUrl = $_POST['returnurl'];
if (!strlen($returnUrl)) {
$returnUrl = $_SERVER['HTTP_REFERER'];
if (!strlen($returnUrl)) {
$returnUrl = '/';
}
}
$escapedReturnUrl = htmlspecialchars($returnUrl);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Definition Designs - Web and Graphics Design</title>
<meta name="Author" content="Joshua Martin" />
<meta name="Description" content="Definition Designs is the website of Web and Graphic Designer Joshua Martin" />
<link href="/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header-text">
definition<div id="z">designs</div>
</div>
</div>
<div id="navbar">
<ul>
<li><a href="/index.html">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">tutorials</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
</div>
<div id="contactForm">
<?php
if (count($messages) > 0) {
$message = implode("<br>\n", $messages);
echo("<h4>$message</h4>\n");
}
?>
<form method="POST" action="<?php echo $_SERVER['DOCUMENT_URL']?>">
<p>
<b>Your</b> Email Address
<input
name="email"
size="35"
maxlength="35"
value="<?php echo $escapedEmail?>"/>
</p>
<p>
Your <b>Real</b> Name
<input
name="realname"
size="35"
maxlength="35"
value="<?php echo $escapedRealName?>"/>
</p>
<p>
Subject Of Your Message
<input
name="subject"
size="35"
maxlength="35"
value="<?php echo $escapedSubject?>"/>
</p>
<p>
<i>Please enter the text of your message in the field that follows.</i>
</p>
<textarea
name="body"
rows="10"
cols="60"><?php echo $escapedBody?></textarea>
<p>
<input type="submit" name="send" value="Send Your Message"/>
<input type="submit" name="cancel" value="Cancel - Never Mind"/>
</p>
<input
type="hidden"
name="returnurl"
value="<?php echo $escapedReturnUrl?>"/>
</form>
<?php
}
function redirect()
{
global $serverName;
$returnUrl = $_POST['returnurl'];
$prefix = "http://$serverName/";
if (!beginsWith($returnUrl, $prefix)) {
$returnUrl = "http://$serverName/";
}
header("Location: $returnUrl");
}
function beginsWith($s, $prefix)
{
return (substr($s, 0, strlen($prefix)) === $prefix);
}
function sendMail()
{
global $recipient;
$email = $_POST['email'];
if (!preg_match("/^[\w\+\-\.\~]+\@[\-\w\.\!]+$/", $email)) {
$messages[] = "That is not a valid email address. In format: You@something.com";
}
$realName = $_POST['realname'];
if (!preg_match("/^[\w\ \+\-\'\"]+$/", $realName)) {
$messages[] = "<br>The real name field must contain only alphanumeric characters, spaces and + or - signs.";
}
$subject = $_POST['subject'];
if (preg_match('/^\s*$/', $subject)) {
$messages[] = "<br>Please specify a subject for your message.
";
}
$body = $_POST['body'];
if (preg_match('/^\s*$/', $body)) {
$messages[] = "<br>Your message was blank. Fill out a message or Click Cancel to cancel message.<br><br>";
}
if (count($messages)) {
displayForm($messages);
return;
}
mail($recipient,
$subject,
"
From: $realName, $email;
------------------------------------------
$body") or die("Unable to send the mail!");
$escapedReturnUrl = htmlspecialchars($_POST['returnurl']);
?>
</div>
<?php
}
?>
</body>
</html>
This is my stylesheet code;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
background-color: #e5e5e5;
color: #000;
text-align: left;
margin: 0;
padding: 0;
}
p {
padding: 0 0 12.5px 0;
}
#z {
color: #999;
display: inline;
font-weight: bold;
}
#header{
background-image: url(/PNGs/backgroundheader.png);
height: 40px;
float: left;
width: 100%;
padding: 40px 0;
text-align: left;
display: inline;
font-size: 25px;
font-family: Tahoma, Geneva, sans-serif;
color: #FFFFFF;
position: absolute;
}
#header-text {
padding-left: 140px;
}
#navbar ul{
background-color: #2a2a2a;
background-image: url(/PNGs/repeating.png);
border-top: 1px solid #FFFFFF;
font-size: 14px;
margin: 0;
top: 80px;
height: 30px;
position: relative;
padding: 15px 0 0 120px;
}
#navbar ul li {
display: inline;
height: 20px;
}
#navbar ul li a {
text-decoration: none;
width: 100px;
color: #FFFFFF;
padding: 5px 20px 5px 20px;
}
#navbar ul li a:hover {
color: #FFF;
background: url(PNGs/gradientbkg.png) 0% 0% repeat;
border-top: 1px solid #434343;
border-bottom: 1px solid #434343;
}
#mainContent {
text-align: center;
top: 80px;
width: 77%;
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 15px;
background-color: #FFFFFF;
border-left: 2px solid #FFC;
border-right: 2px solid #FFC;
}
#contactForm {
top: 80px;
width: 77%;
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 15px;
background-color: #FFFFFF;
border-left: 2px solid #FFC;
border-right: 2px solid #FFC;
text-align: left;
font-size: 12px;
}
#mainContent q {
text-align: center;
}
If anyone could tell me how to fix this cross-browser error this would be much appreciated!
I have checked with W3C my code on the Index page and the CSS page, index page getting XHTML 1.1 and CSS validating at CSS 2.1.
On the Index page on FF, the padding works at the bottom and top on the navbar, but in IE7 it only pads the top and not the bottom. My index.html code is;
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Definition Designs - Web and Graphics Design</title>
<meta name="Author" content="Joshua Martin" />
<meta name="Description" content="Definition Designs is the website of Web and Graphic Designer Joshua Martin" />
<link href="/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header-text">
definition<div id="z">designs</div>
</div>
</div>
<div id="navbar">
<ul>
<li><a href="/index.html">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">tutorials</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
</div>
<div id="mainContent">
<p>Lorem ipsum boring gypsum.</p>
</div>
</body>
</html>
On my contact.php page, it works fine in FF again, but in IE7 the div is pushed to the left and does not center. Also, the navbar becomes distorted in IE. My contact.php page code is this, and as far as I know, this isnt a PhP error, this is a problem with my divs. (I am not very good at PhP, but it works fine for me);
<?php
$recipient = 'defenitiondesigns@googlemail.com';
$serverName = 'www.definition-designs.co.uk';
if ($_POST['send']) {
sendMail();
} elseif (($_POST['cancel']) || ($_POST['continue'])) {
redirect();
} else {
displayForm();
}
function displayForm($messages = array())
{
global $login;
$escapedEmail = htmlspecialchars($_POST['email']);
$escapedRealName = htmlspecialchars($_POST['realname']);
$escapedSubject = htmlspecialchars($_POST['subject']);
$escapedBody = htmlspecialchars($_POST['body']);
$returnUrl = $_POST['returnurl'];
if (!strlen($returnUrl)) {
$returnUrl = $_SERVER['HTTP_REFERER'];
if (!strlen($returnUrl)) {
$returnUrl = '/';
}
}
$escapedReturnUrl = htmlspecialchars($returnUrl);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Definition Designs - Web and Graphics Design</title>
<meta name="Author" content="Joshua Martin" />
<meta name="Description" content="Definition Designs is the website of Web and Graphic Designer Joshua Martin" />
<link href="/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header-text">
definition<div id="z">designs</div>
</div>
</div>
<div id="navbar">
<ul>
<li><a href="/index.html">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">tutorials</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
</div>
<div id="contactForm">
<?php
if (count($messages) > 0) {
$message = implode("<br>\n", $messages);
echo("<h4>$message</h4>\n");
}
?>
<form method="POST" action="<?php echo $_SERVER['DOCUMENT_URL']?>">
<p>
<b>Your</b> Email Address
<input
name="email"
size="35"
maxlength="35"
value="<?php echo $escapedEmail?>"/>
</p>
<p>
Your <b>Real</b> Name
<input
name="realname"
size="35"
maxlength="35"
value="<?php echo $escapedRealName?>"/>
</p>
<p>
Subject Of Your Message
<input
name="subject"
size="35"
maxlength="35"
value="<?php echo $escapedSubject?>"/>
</p>
<p>
<i>Please enter the text of your message in the field that follows.</i>
</p>
<textarea
name="body"
rows="10"
cols="60"><?php echo $escapedBody?></textarea>
<p>
<input type="submit" name="send" value="Send Your Message"/>
<input type="submit" name="cancel" value="Cancel - Never Mind"/>
</p>
<input
type="hidden"
name="returnurl"
value="<?php echo $escapedReturnUrl?>"/>
</form>
<?php
}
function redirect()
{
global $serverName;
$returnUrl = $_POST['returnurl'];
$prefix = "http://$serverName/";
if (!beginsWith($returnUrl, $prefix)) {
$returnUrl = "http://$serverName/";
}
header("Location: $returnUrl");
}
function beginsWith($s, $prefix)
{
return (substr($s, 0, strlen($prefix)) === $prefix);
}
function sendMail()
{
global $recipient;
$email = $_POST['email'];
if (!preg_match("/^[\w\+\-\.\~]+\@[\-\w\.\!]+$/", $email)) {
$messages[] = "That is not a valid email address. In format: You@something.com";
}
$realName = $_POST['realname'];
if (!preg_match("/^[\w\ \+\-\'\"]+$/", $realName)) {
$messages[] = "<br>The real name field must contain only alphanumeric characters, spaces and + or - signs.";
}
$subject = $_POST['subject'];
if (preg_match('/^\s*$/', $subject)) {
$messages[] = "<br>Please specify a subject for your message.
";
}
$body = $_POST['body'];
if (preg_match('/^\s*$/', $body)) {
$messages[] = "<br>Your message was blank. Fill out a message or Click Cancel to cancel message.<br><br>";
}
if (count($messages)) {
displayForm($messages);
return;
}
mail($recipient,
$subject,
"
From: $realName, $email;
------------------------------------------
$body") or die("Unable to send the mail!");
$escapedReturnUrl = htmlspecialchars($_POST['returnurl']);
?>
</div>
<?php
}
?>
</body>
</html>
This is my stylesheet code;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
background-color: #e5e5e5;
color: #000;
text-align: left;
margin: 0;
padding: 0;
}
p {
padding: 0 0 12.5px 0;
}
#z {
color: #999;
display: inline;
font-weight: bold;
}
#header{
background-image: url(/PNGs/backgroundheader.png);
height: 40px;
float: left;
width: 100%;
padding: 40px 0;
text-align: left;
display: inline;
font-size: 25px;
font-family: Tahoma, Geneva, sans-serif;
color: #FFFFFF;
position: absolute;
}
#header-text {
padding-left: 140px;
}
#navbar ul{
background-color: #2a2a2a;
background-image: url(/PNGs/repeating.png);
border-top: 1px solid #FFFFFF;
font-size: 14px;
margin: 0;
top: 80px;
height: 30px;
position: relative;
padding: 15px 0 0 120px;
}
#navbar ul li {
display: inline;
height: 20px;
}
#navbar ul li a {
text-decoration: none;
width: 100px;
color: #FFFFFF;
padding: 5px 20px 5px 20px;
}
#navbar ul li a:hover {
color: #FFF;
background: url(PNGs/gradientbkg.png) 0% 0% repeat;
border-top: 1px solid #434343;
border-bottom: 1px solid #434343;
}
#mainContent {
text-align: center;
top: 80px;
width: 77%;
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 15px;
background-color: #FFFFFF;
border-left: 2px solid #FFC;
border-right: 2px solid #FFC;
}
#contactForm {
top: 80px;
width: 77%;
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 15px;
background-color: #FFFFFF;
border-left: 2px solid #FFC;
border-right: 2px solid #FFC;
text-align: left;
font-size: 12px;
}
#mainContent q {
text-align: center;
}
If anyone could tell me how to fix this cross-browser error this would be much appreciated!