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.
Related
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>
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 creating a website..When it comes to the navigation menu, I listed it and need the nav bar class to be active when that menu is clicked. It's fine to give class="active" for the list tag. But I need it to be active only when clicked. How can I achieve this .?
My list is :
<div class="menu">
<ul class="nav" id="nav">
<li class="active">
<?php echo anchor("cntrl/index","Home"); ?>
</li>
<li><?php echo $this->session->userdata('user_name'); ?></li>
<li>About</li>
<li>
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
<li>
<?php echo anchor('cntrl/logout','Logout'); ?>
</li>
<div class="clearfix"></div>
</ul>
<script type="text/javascript" src="<?php echo base_url(); ?>/js/responsive-nav.js"></script>
</div>
Well, I handle this sort of issue as follows:
set the active link (which is resided in the url when the link is clicked) into an variable in the controller function which is called by the link
$data['active_link'] = 'home'; # for example
check it in the view file (JS):
$(document).ready(function(){
var active_link = "<?php echo $active_link;?>";
$("li").removeClass('active');
$("#"+active_link).addClass('active');
});
Use the following code.
<li class="<?php echo (endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')? 'active':''); ?>">
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
Main part of this code is
endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')
Where $_SERVER['REQUEST_URI'] is your current URL. and 'cntrl/jobs' is your menu which is being checked with current URL.
I have PHP code which will check if the user is logged in and will return the menu if they are, however I was wondering if there was a way to make each of the current selected highlighted or would I have to go through and add them as a manual list to each page?
The code is:
<?php
if (!securePage($_SERVER['PHP_SELF'])){die();}
//Links for logged in user
if(isUserLoggedIn()) {
echo "<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>
<div id='button1'>
<a href='/Demos.php'>Demos</a></div>
<div id='button2'>
<a href='/Helpfiles.php'>Helpfiles</a></div>
<div id='greeting'>
Hello, $loggedInUser->displayname.</br>";
}
//Links for users not logged in
else{
echo "<div id='Default'>
<ul>
<li><a href='/login.php'>Login</a></li>
<li><a href='/register.php'>Register</a></li>
<li><a href='/forgot-password.php'>Forgot Password</a></li>";
echo "</ul></div>";
}
?>
Now I know that on a normal CSS one it would just be .current and you can do it that way, however I cannot make that work with this echo because they are all on the screen at the same time. What would be the best way? Manually add would see like the longer way.
p.s. this is used in conjunction with usercake
You don't need to put HTML into an echo in PHP. I would recommend something like this.
So you will end up with something like:
<?php
if(isUserLoggedIn()) {
?>
<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul>
</div>
<div id='greeting'>
Hello, <?php echo $loggedInUser->displayname; ?>
</br>
<?php } ?>
Then I would not recommend you to add the class with PHP because you will suffer from lisibility with a lots of if and else cases.
The best way to do this would be to use ID/Classes for your LIs and add the selected class to a specitic item with a simple JavaScript function.
Btw, if you really feel the needs to have this in PHP I recommend you to read this:
http://www.catswhocode.com/blog/snippets/highlight-current-menu-item-in-php
http://webdeveloperswall.com/php/how-to-highlight-the-current-page-in-menu-in-php
So you will have something like:
<?php if(isUserLoggedIn()) { ?>
<ul>
<?php
$url = $_SERVER['REQUEST_URI'];
$parts = parse_url($url);
$page_name = basename($parts['path']);
?>
<li><a class="<?php echo ($page_name=='acount.php')?'selected':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='user_settings.php')?'selected':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='logout.php')?'selected':'';?>" href="contact.php">CONTACT US</a></li>
</ul>
<?php } ?>
EDIT
Finally, you should end up with something like this: http://pastebin.com/V8jxwi7T
You could grab the page you are currently browsing and see if it matches. Something like this perhaps? (sorry for the crude example)
<?php
// will return 'home' is the filename is home.php
$filename = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
?>
<li <?php if ($filename == "home") { echo "class='active'"; } ?>>
Home
</li>
Some info on pathinfo and how it works here
Just add class to selected <li> element, this way:
echo "<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li class="selected"><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>";
In your CSS, put appropriate style for .selected class.
You should have a variable telling in which page you are, let's say it's $currentpage.
echo "<div id='Default'>
<ul>
<li".($currentpage=='account' ? ' class="selected"' : '')."><a href='/account.php' >Account Home</a></li>
<li".($currentpage=='usersettings' ? ' class="selected"' : '')."><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>";
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