Why are pieces of my HTML showing up on the page and breaking it? Is it PHP related?
I've been building a site in PHP, HTML, CSS, and using a healthy dose of jQuery javascript. The site looks absolutely fine on my Mac browsers, but for some reason, when my client uses PC Safari, she's seeing strange bits of my HTML show up on the page.
Here are some (small) screenshot examples:
Figure 1: This one is just a closing </li> tag that should've been on the Media li element. Not much harm done, but strange.
Figure 2: Here this was part of <div class='submenu'> and since the div tag didn't render properly, the entire contents of that div don't get styled correctly by CSS.
// picture removed for security reasons
Figure 3: This last example shows what should have been <a class='top current' href=... but for some reason half of the HTML tag stops being rendered and just gets printed out. So the rest of that list menu is completely broken.
Here's the code from the header.php file itself. The main navigation section (seen in the screenshots) is further down, marked by a line开发者_开发技巧 of asterisks if you want to skip there.
<?php
// Setting up location variables
if(isset($_GET['page'])) { $page = Page::find_by_slug($_GET['page']); }
elseif(isset($_GET['post'])) { $page = Page::find_by_id(4); }
else { $page = Page::find_by_id(1); }
$post = isset($_GET['post']) ? Blogpost::find_by_slug($_GET['post']) : false;
$front = $page->id == 1 ? true : false;
$buildblog = $page->id == 4 ? true : false;
$eventpage = $page->id == 42 ? true : false;
// Setting up content edit variables
$edit = isset($_GET['edit']) ? true : false;
$preview = isset($_GET['preview']) ? true : false;
// Finding page slug value
$pageslug = $page->get_slug($loggedIn);
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<?php
if(!$post) {
if($page->id != 1) {
echo $page->title." | ";
}
echo $database->site_name();
}
elseif($post) {
echo "BuildBlog | ".$post->title;
}
?>
</title>
<link href="<?php echo SITE_URL; ?>/styles/style.css" media="all" rel="stylesheet" />
<?php include(SITE_ROOT."/scripts/myJS.php"); ?>
</head>
<body class="
<?php
if($loggedIn) { echo "logged"; } else { echo "public"; }
if($front) { echo " front"; }
?>">
<?php $previewslug = str_replace("&edit", "", $pageslug); ?>
<?php if($edit) { echo "<form id='editPageForm' action='?page={$previewslug}&preview' method='post'>"; } ?>
<?php if($edit && !$preview) : // Edit original ?>
<div id="admin_meta_nav" class="admin_meta_nav">
<ul class="center nolist">
<li class="title">Edit</li>
<li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
<li class="save"><input style='position: relative; z-index: 500' class='save' type="submit" name="newpreview" value="Preview" /></li>
<li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li>
</ul>
</div>
<?php elseif($preview && !$edit) : // Preview your edits ?>
<div id="admin_meta_nav" class="admin_meta_nav">
<ul class="center nolist">
<li class="title">Preview</li>
<li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
<li class="save"><a class="newpreview" href="?page=<?php echo $pageslug; ?>&preview&edit">Continue Editing</a></li>
<li class="publish"><a class="publish" href="?page=<?php echo $pageslug; ?>&publishLastPreview">Publish</a></li>
</ul>
</div>
<?php elseif($preview && $edit) : // Return to preview and continue editing ?>
<div id="admin_meta_nav" class="admin_meta_nav">
<ul class="center nolist">
<li class="title">Edit Again</li>
<li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
<li class="save"><input style='position: relative; z-index: 500' class='save button' type="submit" name="newpreview" value="Preview" /></li>
<li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li>
</ul>
</div>
<?php else : ?>
<div id="meta_nav" class="meta_nav">
<ul class="center nolist">
<li><a href="login.php?logout">Logout</a></li>
<li><a href="<?php echo SITE_URL; ?>/admin">Admin</a></li>
<li><a href="<?php
if($front) {
echo "admin/?admin=frontpage";
} elseif($event || $eventpage) {
echo "admin/?admin=events";
} elseif($buildblog) {
if($post) {
echo "admin/editpost.php?post={$post->id}";
} else {
echo "admin/?admin=blog";
}
} else {
echo "?page=".$pageslug."&edit";
}
?>">Edit Mode</a></li>
<li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li>
<li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li>
</ul>
<div class="clear"></div>
</div>
<?php endif; ?>
<div id="public_meta_nav" class="public_meta_nav">
<div class="center">
<ul class="nolist">
<li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li>
<li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
******* Main Navigation Section, as seen in screenshots above, starts here ********
<div class="header">
<div class="center">
<a class="front_logo" href="<?php echo SITE_URL; ?>"><?php echo $database->site_name(); ?></a>
<ul class="nolist main_nav">
<?php
$tops = Page::get_top_pages();
$topcount = 1;
foreach($tops as $top) {
$current = $top->id == $topID ? true : false;
$title = $top->title == "Front Page" ? "Home" : ucwords($top->title);
$url = ($top->title == "Front Page" || !$top->get_slug($loggedIn)) ? SITE_URL : SITE_URL . "/?page=".$top->get_slug($loggedIn);
if(isset($_GET['post']) && $top->id == 1) {
$current = false;
}
if(isset($_GET['post']) && $top->id == 4) {
$current = true;
}
echo "<li";
if($topcount > 3) { echo " class='right'"; }
echo "><a class='top";
if($current) { echo " current"; }
echo "' href='{$url}'>{$title}</a>";
if($children = Page::get_children($top->id)) {
echo "<div class='submenu'>";
echo "<div class='corner-helper'></div>";
foreach($children as $child) {
echo "<ul class='nolist level1";
if(!$subchildren = Page::get_children($child->id)) {
echo " nochildren";
}
echo "'>";
$title = ucwords($child->title);
$url = !$child->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$child->get_slug($loggedIn);
if($child->has_published() || $loggedIn) {
echo "<li><a class='title' href='{$url}'>{$title}</a>";
if($subchildren = Page::get_children($child->id)) {
echo "<ul class='nolist level2'>";
foreach($subchildren as $subchild) {
if($subchild->has_published() || $loggedIn) {
$title = ucwords($subchild->title);
$url = !$subchild->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$subchild->get_slug($loggedIn);
echo "<li><a href='{$url}'>{$title}</a>";
}
}
echo "</ul>";
}
echo "</li>";
}
echo "</ul>";
}
echo "</div>";
}
echo "</li>";
$topcount++;
}
?>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="mediaLibraryPopup" class="mediaLibraryPopup">
<h3>Media Library</h3>
<ul class="box nolist"></ul>
<div class="clear"></div>
<a href="#" class="cancel">Cancel</a>
</div>
<div class="main_content">
Does anyone have any idea why the PC Safari browser would be breaking things up like this? I'm assuming it's PHP related but I cannot figure out why it would do that.
Here is the View Source version of the served HTML, as requested: (the IP has been obscured FYI)
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Become An Advocate | Habitat for Humanity</title>
<link href="http://28.5.337.28/~habiall2/styles/style.css" media="all" rel="stylesheet" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/tiny_mce.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/jquery.easing.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/cufon.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/helvetica_condensed.js'></script>
<script>
Cufon.replace('#feature_boxes .heading', { hover: true });
Cufon.replace('#feature_boxes .button', { hover: true });
</script>
<script src='http://28.5.337.28/~habiall2/scripts/front_public.js'></script><script src='http://28.5.337.28/~habiall2/scripts/front_admin.js'></script><script src='http://28.5.337.28/~habiall2/scripts/jquery.cycle.js'></script>
<script >
$('#feature_boxes').cycle({
fx: 'fade',
timeout: 8000,
speed: 500,
easing: 'easeInCubic',
pager: '.feature_pager'
});
</script>
</head>
<body class="
public">
<div id="meta_nav" class="meta_nav">
<ul class="center nolist">
<li><a href="login.php?logout">Logout</a></li>
<li><a href="http://28.5.337.28/~habiall2/admin">Admin</a></li>
<li><a href="?page=what-is-advocacy&edit">Edit Mode</a></li>
<li><a href="http://28.5.337.28/~habiall2/?page=donate">Donate</a></li>
<li><a href="http://28.5.337.28/~habiall2/?page=calendar">Calendar</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="public_meta_nav" class="public_meta_nav">
<div class="center">
<ul class="nolist">
<li><a href="http://28.5.337.28/~habiall2/?page=donate">Donate</a></li>
<li><a href="http://28.5.337.28/~habiall2/?page=calendar">Calendar</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="header">
<div class="center">
<a class="front_logo" href="http://28.5.337.28/~habiall2">Habitat for Humanity</a>
<ul class="nolist main_nav">
<li><a class='top' href='http://28.5.337.28/~habiall2'>Home</a></li>
<li><a class='top' href='http://28.5.337.28/~habiall2/?page=about'>About</a>
<div class='submenu'><div class='corner-helper'></div>
<ul class='nolist level1'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=about-us'>About Us</a>
<ul class='nolist level2'>
<li><a href='http://28.5.337.28/~habiall2/?page=mission-and-vision'>Mission And Vision</a>
<li><a href='http://28.5.337.28/~habiall2/?page=history'>History</a>
<li><a href='http://28.5.337.28/~habiall2/?page=staff-and-board'>Staff And Board</a>
<li><a href='http://28.5.337.28/~habiall2/?page=jobs-and-internships'>Jobs And Internships</a>
<li><a href='http://28.5.337.28/~habiall2/?page=directions'>Directions</a>
<li><a href='http://28.5.337.28/~habiall2/?page=annual-report'>Annual Report</a>
</ul>
</li>
</ul>
<ul class='nolist level1'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=our-stories'>Our Stories</a>
<ul class='nolist level2'><li><a href='http://28.5.337.28/~habiall2/?page=homeowner-profiles'>Homeowner Profiles</a>
<li><a href='http://28.5.337.28/~habiall2/?page=volunteer-profiles'>Volunteer Profiles</a>
<li><a href='http://28.5.337.28/~habiall2/?page=partner-profiles'>Corporate Profiles</a>
<li><a href='http://28.5.337.28/~habiall2/?page=community-profiles'>Community Profiles</a>
</ul>
</li>
</ul>
<ul class='nolist level1 nochildren'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=calendar'>Calendar</a></li>
</ul>
</div>
</li>
<li><a class='top current' href='http://28.5.337.28/~habiall2/?page=get-involved'>Get Involved</a>
<div class='submenu'><div class='corner-helper'></div>
<ul class='nolist level1'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=construction volunteer'>Volunteer</a>
<ul class='nolist level2'>
<li><a href='http://28.5.337.28/~habiall2/?page=Construction'>Construction</a>
<li><a href='http://28.5.337.28/~habiall2/?page=non-construction volunteer'>Non-Construction </a>
<li><a href='http://28.5.337.28/~habiall2/?page=faith-programs'>Faith Programs</a>
<li><a href='http://28.5.337.28/~habiall2/?page=youth-programs'>Youth Programs</a>
<li><a href='http://28.5.337.28/~habiall2/?page=forms-and-info'>Forms And Info</a>
<li><a href='http://28.5.337.28/~habiall2/?page=AmeriCorps'>AmeriCorps</a>
</ul>
</li>
</ul>
<ul class='nolist level1'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=advocate-1'>Advocate</a>
<ul class='nolist level2'>
<li><a href='http://28.5.337.28/~habiall2/?page=become-an-advocate'>What Is Advocacy?</a>
<li><a href='http://28.5.337.28/~habiall2/?page=what-is-advocacy'>Become An Advocate</a>
</ul>
</li>
</ul>
<ul class='nolist level1'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=donate-1-2'>Donate</a>
<ul class='nolist level2'>
<li><a href='http://28.5.337.28/~habiall2/?page=one-time-donation'>One-time Donations</a>
<li><a href='http://28.5.337.28/~habiall2/?page=corporate-donations'>Corporate Donations</a>
<li><a href='http://28.5.337.28/~habiall2/?page=ReStore'>ReStore</a>
<li><a href='http://28.5.337.28/~habiall2/?page=vehicle-donation'>Other Ways To Donate</a>
<li><a href='http://28.5.337.28/~habiall2/?page=item-wishlist'>Item Wishlist</a>
</ul>
</li>
</ul>
</div>
</li>
<li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=apply'>Apply</a>
<div class='submenu'><div class='corner-helper'></div>
<ul class='nolist level1 nochildren'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=process'>Requirements</a></li>
</ul>
<ul class='nolist level1 nochildren'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=requirements'>Income Guidelines</a></li>
</ul>
<ul class='nolist level1 nochildren'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=Local-Assistance-'>Local Assistance </a></li>
</ul>
</div>
</li>
<li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=blog'>BuildBlog</a></li>
<li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=media'>Media</a>
<div class='submenu'><div class='corner-helper'></div>
<ul class='nolist level1 nochildren'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=presskit'>Presskit</a></li>
</ul>
<ul class='nolist level1 nochildren'>
<li><a class='title' href='http://28.5.337.28/~habiall2/?page=media-gallery'>Media Gallery</a></li>
</ul>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="mediaLibraryPopup" class="mediaLibraryPopup">
<h3>Media Library</h3>
<ul class="box nolist"></ul>
<div class="clear"></div>
<a href="#" class="cancel">Cancel</a>
</div>
PHP will never produce any differences across browsers (unless you work at making it do so). It's compiled serverside, so the only thing that the browser sees is the the HTML/CSS/Javascript.
You absolutely need to generate valid HTML with a proper DOCTYPE to be rendered by browsers in standards mode. When you don't, browsers try to fix the errors they find the best of their ability. While there's (supposedly) only one standard way to display valid HTML, there're no rules to handle invalid HTML because the variety of possible errors is infinite. Broken HTML (aka tag soup) is subject to way more cross-browser differences.
Now, the mere fact that you've included PHP as first suspect suggests that you don't have a clear idea of how web technologies work and interact. It's alright (we all have to start learning somewhere) but you should know that PHP is a server-side language. It can generate HTML (and CSS, JavaScript or even pictures) but browser only receive its output. When your page looks bad, resort to your browser's View Source menu as your first debugging tool.
Update
You can use this: http://validator.w3.org/#validate_by_input
Your HTML triggers 55 errors (however, it's likely that they all have the same source). It's also a good idea to validate CSS.
I validated your HTML, and only three things came up: You have two links with spaces in them: <li><a class='title' href='http://28.5.337.28/~habiall2/?page=construction volunteer'>Volunteer</a><li> and <li><a href='http://28.5.337.28/~habiall2/?page=non-construction volunteer'>Non-Construction </a>
and somewhere you used an ampersand instead of & which is minor, but I suppose could be causing the problem. I also can't get the page to render incorrectly in Chromium or Firefox, but then I don't have CSS or JS. Is it possible one of you Javascript deals is gumming up the works? Try removing all your JS and see if the error is still there.
Looking at the html you are missing the "<html>" tag in the header it should appear right after the doctype. I would imagine that that's important in preventing parsing errors.
Like Alvaro suggested, you need to make sure it's valid for the best cross browser compatibility.
Use W3C's validator: http://validator.w3.org/ to validate your html
加载中,请稍侯......
精彩评论