I'm trying to style the active link with is_page() function. And it works for the first nav item. But when I click the "om" link it will get styling, but the styling for "hem" remains. But when I click the "blogg" and "tutorial" links none of the links gets any styling.
This is the code that I have in header.php.
<nav>
<button class="menuButton">Meny</button>
<div class="menu">
x
<ul>
<h2>Meny</h2>
<li class="<?php if (is_page("")) { echo "active-page"; } ?>">Hem</li>
<li class="<?php if (is_page("/om")) { echo "active-page"; } ?>">Om</li>
<li class="<?php if (is_page("/blogg")) { echo "active-page"; } ?>">Blogg arkiv</li>
<li class="<?php if (is_page("/tutorial")) { echo "active-page"; } ?>">Tutorials arkiv</li>
</ul>
</div>
</nav>
Is this the wrong way to use the is_page()function? I'm a little lost here. The styling that gets applied is just a simple text-decoration: underline; CSS style.
Try this
<nav>
<button class="menuButton">Meny</button>
<div class="menu">
x
<ul>
<h2>Meny</h2>
<li class="<?php if (is_page("")) { echo "active-page"; } ?>">Hem</li>
<li class="<?php if (is_page("om")) { echo "active-page"; } ?>">Om</li>
<li class="<?php if (is_page("blogg")) { echo "active-page"; } ?>">Blogg arkiv</li>
<li class="<?php if (is_page("tutorial")) { echo "active-page"; } ?>">Tutorials arkiv</li>
</ul>
</div>
</nav>
Related
I have pretty long nav here, which I have to import to WordPress.
<header class="small">
<div class="yellow-stripe"></div>
<div class="container">
<nav role="navigation">
<ul class="navigation">
<li>
About us
<ul class="sub-navigation">
<li>We are</li>
<li>Our story</li>
<li>Why Ledil</li>
<li>Where</li>
<li>Management</li>
<li>Investors</li>
</ul>
</li>
<li>News</li>
<li>Events</li>
<li>FAQ</li>
</ul>
</nav>
<ul class="lang">
<li class="active">EN</li>
<li>ES</li>
<li>RUS</li>
</ul>
</div>
<div class="nav-button">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</header>
It's made in HTML and now I have to import it to WordPress. I got WordPress to include the header, and to load the whole thing just fine, and it looks great on page, but I would need to add class="active" for bootstrap nav to current page and to child pages too.
I found some answers by googling, but I didn't really get very far.
My function.php looks like this:
<?php
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
add_filter('nav_menu_css_class', 'special_nav_class', 10, 2);
function special_nav_class($classes, $item){
if( in_array('current_page_parent', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
?>
I'm not really sure what I should try. I find the whole WordPress thing very strange.
There seems to be no current_page_item class here.. should I do anything special to enable it?
li.current_page_parent a {} won't work, nor will setting class="<?php if (is_page('name-of-page')) echo 'active'; ?>" inside a tags... goddamn WordPress...
Never mind.. I'm just bit slow.... I put class="<?php if (is_page('why')) echo 'active'; ?>" inside every li element.
If anyone ends up here:
You should check if the page is active or the page is child of another page
<li class="<?php if (is_page('offices')) echo 'active'; ?>">Offices</li>
Checks if page is "offices" and
<li class="<?php if (is_page_child(143)) echo 'active'; ?> echo 'active'; ?>">
Checks if page is child page of page with id "143" and then echoes "active" inside class=" "
I'm trying to make an active navigation bar using PHP where the current page will be highlighted or colored in the navigation bar. The code I used:
<ul class="topmenu">
<li <?php if($_GET['page']="home") { ?> class="active" <?php } ?>>
<b>Bienvenue</b>
</li>
<li <?php if($_GET['page']="livres") { ?> class="active" <?php } ?>>
<b>Livres</b>
</li>
<li <?php if($_GET['page']="bibliotheque") { ?> class="active" <?php } ?>>
<b>Bibliothèque</b>
</li>
<li <?php if($_GET['page']="universite") { ?> class="active" <?php } ?>>
<b>L'université</b>
</li>
<li <?php if($_GET['page']="contact") { ?> class="active" <?php } ?>>
<b>Contact</b>
</li>
</ul>
The code will put the attribut in the class active if the page is the current page in the navigation bar. However, all the attributs will be given the class active in this case. How do I fix this?
P.S: I am not looking for any JS or jQuery alternatives, I'm trying to make this work with PHP only.
You could use $_SERVER['SCRIPT_NAME'].
<ul class="topmenu">
<li <?php if($_SERVER['SCRIPT_NAME']=="/home.php") { ?> class="active" <?php } ?>><b>Bienvenue</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/livres.php") { ?> class="active" <?php } ?>><b>Livres</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/bibliotheque.php") { ?> class="active" <?php } ?>><b>Bibliothèque</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/universite.php") { ?> class="active" <?php } ?>><b>L'université</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/contact.php") { ?> class="active" <?php } ?>><b>Contact</b></li>
</ul>
I don't use PHP, but give the current page the active tag, and change it per file. Then a single class definition in the CSS handles changing the color for each page.
HTML:
<nav>
<a class="active" href="/home/">Home</a>
Calendar
Community
</nav>
CSS:
.active {
background-color: #4CAF50;
}
Declare page variables at the very top of each individual page.
Example: <? $page="home";?>
For each list item in your nav bar add if statment with corresponding variable and active class.
Example: <li class="<?if($page=="home"){?>active<?}?>"><b>Bienvenue</b></li>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.
I'm using bootstrap 4 class. I've achieved Active Class selection something like this.
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile1.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile1.php">Home
</a>
</li>
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile2.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile2.php">Home
</a>
</li>
Repeat this logic for further li tags. Hope this helps someone else.
The code work correctly if you use "==" instead of "=" in The if construct
Еxample:
if($_GET['page'] **==** "home")...
Instead:
if($_GET['page'] **=** "home")...
Hope this helps someone else...
I have made a navigation in php, which works perfect, well, almost perfect. I have 6 pages site and button of active page is highlighted with a different color. In 4 pages it works, but for "gold going green" and "About Ecuador" link remains not highlighted. Here is the code I used:
<?php
//initialize the page variables here so no errors occur in some server environments
$index="myButtons";
$about="myButtons";
$gold="myButtons";
$ecuador="myButtons";
$contact="myButtons";
$documents="myButtons";
//this line gets the file name without the dot and extension
$menuLinkid=basename($_SERVER['PHP_SELF'], ".php");
if($menuLinkid=="index"){
$index='myActiveButton';
} else if($menuLinkid=="about"){
$about='myActiveButton';
} else if($menuLinkid=="gold"){
$gold='myActiveButton';
} else if($menuLinkid=="ecuador"){
$ecuador='myActiveLink';
} else if($menuLinkid=="contact"){
$contact='myActiveButton';
} else if($menuLinkid=="documents"){
$documents='myActiveButton';
}
?>
<div id="header">
<div id="innerheader">
<h1 id="logo"><img src="img/logo.gif" /></h1>
<nav id="navigation">
<ul class="menu">
<li><a class="<?php echo $index; ?>" href="../index.php">Home</a></li>
<li>/</li>
<li><a class="<?php echo $about; ?>" href="../about.php">About</a></li>
<li>/</li>
<li><a class="<?php echo $gold; ?>" href="../gold-going-green.php">Gold going green</a> </li>
<li>/</li>
<li><a class="<?php echo $ecuador; ?>" href="../about-ecuador.php">About Ecuador</a></li>
<li>/</li>
<li><a class="<?php echo $contact; ?>" href="../contact.php">Contact</a></li>
<li>/</li>
<li><a class="<?php echo $documents; ?>" href="../documents.php">Documents</a></li>
</ul>
</nav>
</div><!-- /innerheader -->
</div><!-- /header -->
You set everthing to 'myActiveButton', and use myActiveLink for ecuador:
$ecuador='myActiveLink';
Try this:
$ecuador='myActiveButton';
Change,
else if($menuLinkid=="gold"){
$gold='myActiveButton';
to
else if($menuLinkid=="gold-going-green"){
$gold='myActiveButton';
& Change
$ecuador='myActiveLink';
to
$ecuador='myActiveButton';
and recheck.
I want to put my html navigation in a separate php file so when I need to edit it, I only have to edit it once. The problem starts when I want to add the class active to the active page.
I've got three pages and one common file.
common.php :
<?php
$nav = <<<EOD
<div id="nav">
<ul>
<li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
EOD;
?>
index.php :
All three pages are identical except their $page is different on each page.
<?php
$page = 'one';
require_once('common.php');
?>
<html>
<head></head>
<body>
<?php echo $nav; ?>
</body>
</html>
This simply won't work unless I put my nav on each page, but then the whole purpose of separating the nav from all pages is ruined.
Is what I want to accomplish even possible? What am I doing wrong?
Thanks
EDIT: When doing this, the php code inside the li don't seem to run, it's just being printed as if it was html
why don't you do it like this:
in the pages:
<html>
<head></head>
<body>
<?php $page = 'one'; include('navigation.php'); ?>
</body>
</html>
in the navigation.php
<div id="nav">
<ul>
<li>
<a <?php echo ($page == 'one') ? "class='active'" : ""; ?>
href="index1.php">Tab1</a>/</li>
<li>
<a <?php echo ($page == 'two') ? "class='active'" : ""; ?>
href="index2.php">Tab2</a>/</li>
<li>
<a <?php echo ($page == 'three') ? "class='active'" : ""; ?>
href="index3.php">Tab3</a>/</li>
</ul>
</div>
You will actually be able to control where in the page you are putting the navigation and what parameters you are passing to it.
Later edit: fixed syntax error.
A very easy solution to this problem is to do this.
<ul>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>">Home</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'portfolio.php'){echo 'current'; }else { echo ''; } ?>">Portfolio</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo ''; } ?>">Services</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'current'; }else { echo ''; } ?>">Contact</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'links.php'){echo 'current'; }else { echo ''; } ?>">Links</li>
</ul>
Which will output
<ul>
<li class="current">Home</li>
<li class="">Portfolio</li>
<li class="">Services</li>
<li class="">Contact</li>
<li class="">Links</li>
</ul>
Your index.php code is correct. I am including the updated code for common.php below then I will explain the differences.
<?php
$class = ($page == 'one') ? 'class="active"' : '';
$nav = <<<EOD
<div id="nav">
<ul>
<li><a $class href="index.php">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
EOD;
?>
The first issue is that you need to make sure that the end declaration for your heredoc -- EOD; -- is not indented at all. If it is indented, then you will get errors.
As for your issue with the PHP code not running within the heredoc statement, that is because you are looking at it wrong. Using a heredoc statement is not the same as closing the PHP tags. As such, you do not need to try reopening them. That will do nothing for you. The way the heredoc syntax works is that everything between the opening and closing is displayed exactly as written with the exception of variables. Those are replaced with the associated value. I removed your logic from the heredoc and used a tertiary function to determine the class to make this easier to see (though I don't believe any logical statements will work within the heredoc anyway)
To understand the heredoc syntax, it is the same as including it within double quotes ("), but without the need for escaping. So your code could also be written like this:
<?php
$class = ($page == 'one') ? 'class="active"' : '';
$nav = "<div id=\"nav\">
<ul>
<li><a $class href=\"index.php\">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>";
?>
It will do exactly the same thing, just is written somewhat differently. Another difference between heredoc and the string is that you can escape out of the string in the middle where you can't in the heredoc. Using this logic, you can produce the following code:
<?php
$nav = "<div id=\"nav\">
<ul>
<li><a ".(($page == 'one') ? 'class="active"' : '')." href=\"index.php\">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>";
?>
Then you can include the logic directly in the string like you originally intended.
Whichever method you choose makes very little (if any) difference in the performance of the script. It mostly boils down to preference. Either way, you need to make sure you understand how each works.
I think you need to put your $page = 'one'; above the require_once.. otherwise I don't understand the question.
Why don't you create a function or class for this navigation and put there active page as a parameter? This way you'd call it as, for example:
$navigation = new Navigation( 1 );
or
$navigation = navigation( 1 );
I know this is old, but none of these answers are very good (sry ppl)
The BEST way to do it (without writing out convoluted classes) is to compare the current $_SERVER['REQUEST_URI'] to the href of the link. You're almost there.
Try this. (Taken from http://ma.tt/scripts/intellimenu/)
$nav = <<<EOD
<div id="nav">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
EOD;
$lines = explode("\n", $nav);
foreach($lines as $line)
{
if(preg_match('/href="([^"]+)"/', $line, $url)) {
if(substr($_SERVER['REQUEST_URI'], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('><a', ' class="current-menu-item"><a', $line);
}
}
echo $line . "\n";
}
$page='one' should occur before you require_once() not after. After is too late- the code has already been required, and $nav has already been defined.
You should use include('header.php'); and include('footer.php'); instead of setting a $nav variable early on. That increases flexibility.
Make more functions. Something like this really makes things easier to follow:
function maybe($x,$y){return $x?$y:'';}
function aclass($k){return " class=\"$k\" "; }
then you can write your "condition" like this:
<a href="..." <?= maybe($page=='one',aclass('active')) ?>> ....
You could use this PHP, hope it helps.
<?php if(basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>
So a list would be like the below.
<ul>
<li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>><i class="fa fa-dashboard"></i> <span>Home</span></li>
<li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'listings' ) { ?> class="active" <?php } else { ?> <?php }?>><i class="fa fa-th-list"></i> <span>Other</span></li>
</ul>
CALL common.php
<style>
.ddsmoothmenu ul li{float: left; padding: 0 20px;}
.ddsmoothmenu ul li a{display: block;
padding: 40px 15px 20px 15px;
color: #4b4b4b;
font-size: 13px;
font-family: 'Open Sans', Arial, sans-serif;
text-align: right;
text-transform: uppercase;
margin-left: 1px; color: #fff; background: #000;}
.current .test{ background: #2767A3; color: #fff;}
</style>
<div class="span8 ddsmoothmenu">
<!-- // Dropdown Menu // -->
<ul id="dropdown-menu" class="fixed">
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>">Home <i>::</i> <span>welcome</span></li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'about.php'){echo 'current'; }else { echo ''; } ?>">About us <i>::</i> <span>Who we are</span></li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'course.php'){echo 'current'; }else { echo ''; } ?>">Our Courses <i>::</i> <span>What we do</span></li>
</ul><!-- end #dropdown-menu -->
</div><!-- end .span8 -->
add each page
<?php include('common.php'); ?>
<ul>
<li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="user.php" ><span>Article</span></a></li>
<li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="newarticle.php"><span>New Articles</span></a></li>
</ul>
The solution i'm using is as follows and allows you to set the active class per php page.
Give each of your menu items a unique class, i use .nav-x (nav-about, here).
<li class="nav-item nav-about">
<a class="nav-link" href="about.php">About</a>
</li>
At the top of each page (about.php here):
<!-- Navbar Active Class -->
<?php $activeClass = '.nav-about > a'; ?>
Elsewhere (header.php / index.php):
<style>
<?php echo $activeClass; ?> {
color: #fff !important;
}
</style>
Simply change the .nav-about > a per page, .nav-forum > a, for example.
If you want different styling (colors etc) for each nav item, just attach the inline styling to that page instead of the index / header page.
seperate your page from nav bar.
pageOne.php:
$page="one";
include("navigation.php");
navigation.php
if($page=="one"){$oneIsActive = 'class="active"';}else{ $oneIsActive=""; }
if($page=="two"){$twoIsActive = 'class="active"';}else{ $twoIsActive=""; }
if($page=="three"){$threeIsActive = 'class="active"';}else{ $threeIsActive=""; }
<ul class="nav">
<li <?php echo $oneIsActive; ?>>One</li>
<li <?php echo $twoIsActive; ?>><a href="#">Page 2</li>
<li <?php echo $threeIsActive; ?>><a href="#">Page 3</li>
</ul>
I found that I could also set the title of my pages with this method as well.
$page="one";
$title="This is page one."
include("navigation.php");
and just grab the $title var and put it in between the "title" tags. Though I am sending it to my header page above my nav bar.
<a href="store/index" <?php if($_SERVER['REQUEST_URI'] == '/store/index') { ?>class="active"<?php } ?> > Link </a>
<a href="account/referral" <?php if($_SERVER['REQUEST_URI'] == '/account/referral') { ?>class="active"<?php } ?> > Link </a>
PHP code
<?php
function activeClass($chkStr){
// echo "testing data";
// echo strlen($_SERVER['REQUEST_URI']);
if($chkStr=="home" && strlen($_SERVER['REQUEST_URI'])<3){
return "active";
}
if (stripos($_SERVER['REQUEST_URI'], $chkStr)!==false){
return "active";
}
else{
return "";
}
}
?>
HTML CODE :
<ul class="navbar-nav">
<li class="nav-item <?php echo activeClass("home"); ?>">
<a class="nav-link txt" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item <?php echo activeClass("about-us.php"); ?>">
<a class="nav-link txt" href="about-us.php">About Us</a>
</li>
<li class="nav-item <?php echo activeClass("services.php"); ?>">
<a class="nav-link txt" href="services.php">Services</a>
</li>
<li class="nav-item <?php echo activeClass("our-team.php"); ?>">
<a class="nav-link txt" href="our-team.php">Our team</a>
</li>
<li class="nav-item <?php echo activeClass("media-awards.php"); ?>">
<a class="nav-link txt" href="media-awards.php">Media & Awards</a>
</li>
<li class="nav-item <?php echo activeClass("blog.php"); ?>">
<a class="nav-link txt" href="blog.php">Blog</a>
</li>
<li class="nav-item <?php echo activeClass("contact-us.php"); ?>">
<a class="nav-link txt" href="contact-us.php">Contact Us</a>
</li>
</ul>
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>Logout</li>
<li>Admin</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>Donate</li>
<li>Calendar</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>Donate</li>
<li>Calendar</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>
Cancel
</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>Logout</li>
<li>Admin</li>
<li>Edit Mode</li>
<li>Donate</li>
<li>Calendar</li>
</ul>
<div class="clear"></div>
</div>
<div id="public_meta_nav" class="public_meta_nav">
<div class="center">
<ul class="nolist">
<li>Donate</li>
<li>Calendar</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>
Cancel
</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