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.
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.
