Page is shifting to the left in IE6

HTML & CSS
1

I’m not sure what’s causing this, but my entire contact page is shifting to the top left corner of the browser…it should be centered…it’s centered in firefox, of course, but in IE6 it’s not. I’m still fairly new to xhtml/css so I may of messed something up with the contact page code…you’ll also notice I have a ‘fake form’ in the contact xhtml to prevent spam.

here’s the URL to check it out:
http://www.pazrt.com/contact-the-pennsylvania-zombie-response-team

here’s the contact xhtml:


<?php
$name = htmlspecialchars($_POST['yourname']);
$email    = htmlspecialchars($_POST['email']);
$problem   = htmlspecialchars($_POST['problem']);
$comments = htmlspecialchars($_POST['comments']);
?>
<!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" xml:lang="en">
<head>
<title>Contact the PAZRT- Pennsylvania Zombie Response Team</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Pennsylvania Zombie Response Team" />
<meta name="copyright" content='All Copyright Pennsylvania Zombie Response Team, all rights reserved' />
<meta name="description" content="PAZRT- Pennsylvania Zombie Response Team is an elite group of people dedicated to the preservation of the human race in the face of a looming zombie outbreak" />
<meta name="keywords" content="pazrt, zrt, pennsylvania zombie response team, pennsylvania zrt, zombies, zombie response team, guns, knives, survival" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<!-- This is the main div -->
<div id="wrapper">
<!-- Start logo coding -->
<div id="logo">
<img src="images/logo.png" alt="main logo" height="168px" style="width: 100&#37;" />
</div>
<!-- Start navigation bar coding -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-the-pennsylvania-zombie-response-team">About Us</a></li>
<li><a href="http://www.pazrt.com/forum">Forums</a></li>
<li><a href="http://www.pazrt.com/gallery/main.php">Gallery</a></li>
<li><a href="http://wiki.pazrt.com">Wiki</a></li>
<li><a href="#">Support<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="donate-to-the-pennsylvania-zombie-response-team">Donate</a></li>
<li><a href="share-the-pennsylvania-zombie-response-team">Share</a></li>
<li><a href="http://www.cafepress.com/pazrt">Store</a></li>
</ul>
<!-- End Links drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Social<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.twitter.com/pazrt">Twitter</a></li>
<li><a href="http://www.facebook.com/pages/Pennsylvania-Zombie-Response-Team/10150095905020602">Facebook</a></li>
<li><a href="http://www.youtube.com/pazrt">Youtube</a></li>
</ul>
<!-- End Links drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="selected"><a href="contact-the-pennsylvania-zombie-response-team">Contact Us</a></li>
</ul>
</div>
<!-- Start contact content coding -->
<div id="contact">
<img src="images/leftlogo.png" alt="left logo" width="440px" style="float: left" />
<form name="contact" enctype="multipart/form-data" action="contact.php" method="post" onsubmit="return validate_fields(this)">
<div style="display: none;">
<!-- Fake Form -->
<li>Name:<br />
<input type="text" size="30" name="name" id="name" /></li>
<li><br /></li>
<li>Email:<br />
<input type="text" size="30" name="email" id="email" /></li>
<li><br /></li>
<li>Problem:<br />
<select name="problem">
<option value="website">Website Problem</option>
<option value="forum">Forum Problem</option>
<option value="misc">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<br />
<textarea name="comments" id="comments" rows="5" cols="45"></textarea></li>
</div>
<ul>
<li>Name:<?php echo $yourname; ?><br />
<input type="text" size="30" name="name1" id="name" /></li>
<li><br /></li>
<li>Email:<?php echo $email; ?><br />
<input type="text" size="30" name="email1" id="email" /></li>
<li><br /></li>
<li>Problem:<?php echo $problem; ?><br />
<select name="problem1">
<option value="website">Website Problem</option>
<option value="forum">Forum Problem</option>
<option value="misc">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<?php echo $comments; ?><br />
<textarea name="comments" id="comments1" rows="5" cols="45"></textarea></li>
<li><br /></li>
<li><br /></li>
<li><input type="submit" name="action" value="Submit" />
&nbsp;
<input type="reset" name="reset" value="Reset" /></li>
</ul>
</form>
</div>
<!-- Start footer coding -->
<div id="footer">
<img src="images/footer.png" alt="footer logo" width="1000px" />
</div>
</div>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">try { var pageTracker = _gat._getTracker("UA-10934935-1"); pageTracker._trackPageview(); } catch(err) {}</script>
</body>
</html>

here’s the layout css:


*
{
margin: 0;
padding: 0;
}

body, body a:link
{
background-color: #666;
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
}

#wrapper
{
width: 62.5em;
background-color: #000;
margin: 0 auto;
padding: 0;
}

#logo, #logo img
{
background-color: #000;
width: 100%;
position: relative;
margin: 0;
padding: 0;
vertical-align: bottom;
}

#navigation
{
background-color: #660000;
width: 62.5em;
height: 1.6em;
margin: 0 auto;
padding: 0;
}

#navigation ul
{
list-style-type: none;
}

#navigation li
{
float: left;
position: relative;
}

#navigation a, #navigation a:link, #navigation a:visited
{
text-decoration: none;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size: 80%;
color: #FFF;
background-color: #660000;
display: block;
height: 2em;
width: 8em;
border-right: solid 1px #CCC;
text-align: center;
line-height: 2em;
outline-style: none;
}

#navigation a:hover, #navigation a:active, #navigation li.selected a:link, #navigation li.selected a:visited
{
background-color: #333;
color: #FFF;
}

#navigation li ul
{
position: absolute;
z-index: 100;
visibility: hidden;
}

#navigation li:hover ul, #navigation a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}

#navigation li:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 1em;
height: auto;
}

#navigation li:hover ul li a:hover
{
background-color: #990000;
color: #FFF;
}

/* IE6 Hack */
#navigation li:hover ul, #navigation li a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}

/* IE6 Hack */
#navigation li:hover ul li a, #navigation li a:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 0.5em;
height: auto;
}

/* IE6 Hack */
#navigation li:hover ul li a:hover, #navigation li a:hover ul li a:hover
{
background-color: #660000;
color: #FFF;
}

/* IE6 Hack */
#navigation table
{
margin: -1px;
border-collapse: collapse;
position: absolute;
top: 0.5em;
left: 0;
z-index: 100;
}

#maincontent
{
background-image: url("images/leftlogo.png"); 
background-repeat: no-repeat;
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
}

#maincontent ul
{
list-style-type: none;
}

#maincontent a:link
{
background-color: #000;
color: #CC0000;
outline-style: none;
}

#contact
{
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
display: inline
}

#contact ul
{
list-style-type: none;
}

#footer, #footer a:link, #footer a:visited 
{
width: 62.5em;
background-color: #000;
color: #CC0000;
margin: 0 auto;
text-align: center;
text-decoration: none;
outline-style: none;
}

#footer a:hover
{
text-decoration: underline;
outline-style: none;
}

not sure if this is needed, but here’s the form processor where I have the ‘fake form’ php:


<?php
if(!empty($_POST['name']) or !empty($_POST['email']) or !empty($_POST['problem']) or !empty($_POST['comments'])) {
header ('Location: http://www.pazrt.com');
}

$name = $_POST["name1"];
$email = $_POST["email1"];
$problem = $_POST["problem1"];
$comments = $_POST["comments1"];

$address_to = "removed";
$address_from = "form@pazrt.com";
$email_subject_line = $name . "'s form";

$email_text = "Name? " . $name .
"\
Email? " . $email .
"\
Problem? " . $problem .
"\
Comments? " . $comments;

mail($address_to, $email_subject_line, $email_text, $address_from);
header ('Location: http://www.pazrt.com/thanks.html');
exit ();
?>
2

Your PHP is not being processed server side, it displays in the HTML.
This results in code before the doctype declaration with throws ie6 in quirks mode.

Just remove the first lines of php code and you’ll see it all goes back to normal.

3

Hi andrewjs18, welcome to SitePoint! :wave:

It seems the PHP scripts aren’t parsed on that page.

That leaves the php scripts in the html, and any code coming before the doctype is causing all IE to jump into quirks mode (and not centre by auto margins).

Edit)
onedayiwillrock, you beat me to it. :slight_smile:

4

thanks guys…that appears to of fixed the problem, but how do I included php in the html and/or call it in from an external page so that it includes the filters to check the form before it’s sent?

here’s the code from the top of the html page I removed


<?php
$name = htmlspecialchars($_POST['yourname']);
$email    = htmlspecialchars($_POST['email']);
$problem   = htmlspecialchars($_POST['problem']);
$comments = htmlspecialchars($_POST['comments']);
?>

here’s how I have it used in the actual form


<ul>
<li>Name:<?php echo $yourname; ?><br />
<input type="text" size="30" name="name1" id="name" /></li>
<li><br /></li>
<li>Email:<?php echo $email; ?><br />
<input type="text" size="30" name="email1" id="email" /></li>
<li><br /></li>
<li>Problem:<?php echo $problem; ?><br />
<select name="problem1">
<option value="website">Website Problem</option>
<option value="forum">Forum Problem</option>
<option value="misc">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<?php echo $comments; ?><br />
<textarea name="comments" id="comments1" rows="5" cols="45"></textarea></li>
<li><br /></li>
<li><br /></li>
<li><input type="submit" name="action" value="Submit" />
&nbsp;
<input type="reset" name="reset" value="Reset" /></li>
</ul>
</form>

if you guys have any suggestions, you may have to help me with how to call it into the page as I don’t know much of php.

Thanks,
Andrew

5

I fixed the issue by simply renaming the file from .html to a .php file…now it’s parsing the php and it’s working just fine!

6

Hi, yes as you found out you normally need hte .php extension for hte PHP parser to parse the PHP

You could have done it automatically by going into Apache and doing a modrewrite though :slight_smile:

7

yes, but after talking to a friend that’s a php developer, he mentioned that having the .htaccess mod would cause more server load.

8

Only slightly :). Hardly even noticeable, even on slow connections IMHO.