Store won't load in Internet Explorer After Custom Header

[tdelaney]

Hello,

I have not been able to find similar issues in this forum or others and I'm hoping someone here can assist us in trouble-shooting so we can get our store running.

We are currently running Zen Cart version 1.3.9b with GoogleCheckout payment module.

We are attempting to integrate our main site's navigation bar into the header section of Zen Cart (tpl_header.php). This integration has been successful when loaded from Firefox. However, Internet Explorer just displays a blank (black) page with no indication of any errors.

The problem page is at: http://tdelaney.com/TestingGrounds/marketplace_noframe/

I have found that the issue appears to center around the CSS code which defines the styles for the navigation items. The reason I say this is that if this section of code (between the <style>'s) is removed, the page loads fine in IE (but does not have the correct formatting since the CSS formatting portion was removed).

The reason we are trying to integrate the navigation menu is because we originally attempted to have Zen Cart within frames. However, we have come to learn that this approach does not work with Internet Explorer.

I'd greatly appreciate any help with this!!


Below is the code within tpl_header.php:

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 */
?>

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>


<style type="text/css">
<!--

body {
	margin-top: 30px;
	background-color: #000;
}

.title {
	color: #ff6600;
	font-family: "Arial Narrow";
	letter-spacing: 4px;
	font-style: normal;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 150;
}

.title a:link {
	color: #ff6600;
	text-decoration: none;
}
.title a:active {
	color: #ff6600;
	text-decoration: none;
}
.title a:visited {
	color: #ff6600;
	text-decoration: none;
	font-size: 22px;
	letter-spacing: 4px;
}
.title a:hover {
	color: #FFF;
	text-decoration: none;
}

.nav {
	font-size: 15px;
	color: #999;
	font-family: "Arial Narrow";
	text-transform: uppercase;
	list-style-position: inherit;
	text-decoration: none;
	vertical-align: top;
	list-style-position: inherit;
	padding: 0;
	margin: 0;
	letter-spacing: 4px;
}
.nav a:link {
	color: #FFF;
	text-decoration: none;
}
.nav a:active {
	color: #FF6600;
	text-decoration: none;
}
.nav a:visited {
	color: #FFF;
	text-decoration: none;
	font-family: Arial;
}
.nav a:hover {
	color: #FF6600;
	text-decoration: none;
}
.nav-dash {
	color: #333;
	font-family: "Arial Narrow";
}


	
.nav-active a:link {
	color: #999;
	text-decoration: none;

}
.nav-active a:active {
	color: #999;
	text-decoration: none;
}
.nav-active a:visited {
	color: #999;
	text-decoration: none;
	font-family: Arial;
	
}
.nav-active a:hover {
	color: #ccc;
	text-decoration: none;
}


.body a:link {
	color: #FFF;
	text-decoration: none;
}
.body a:active {
	color: #FF6600;
	text-decoration: none;
}
.body a:visited {
	color: #FFF;
	text-decoration: none;
	font-family: Arial;
}
.body a:hover {
	color: #FF6600;
	text-decoration: none;
}

.commissionsnav {
	font-family: "Arial Narrow";
	font-size: 13px;
	text-transform: uppercase;
	color: #CCC;
	text-decoration: none;
	letter-spacing: 1px;
	
}
.commissionsnav a:link{
	color:#ccc;
	text-decoration: none;
}
.commissionsnav a:hover{
	color:#ff6600;
	text-decoration: none;
}
.commissionsnav a:active{
	color:#ff6600;
	text-decoration: none;
}
.commissionsnav a:visited{
	color:#ccc;
	text-decoration: none;

}



.commissionsalbumsubtitle {
	font-family: "Arial Narrow";
	font-size: 14px;
	font-weight: normal;
	color: #999;
}




      ul {
          list-style-type:none;
          padding:0px 0px 0px 5px;
          margin:0px 0px;
      }
      ul li {
          float:left;
          margin:6px 5px;
       
      }
	  
.img-desc {
	position: relative;
	display: block;
	height:326px;
	width: 225px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 221px;
	padding: 2px;
	border-top: 0px solid #999;
	font-family: "Arial Narrow";
	text-decoration: none;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}



</style>




<table width="960" border="0" align="center" cellspacing="0">
  <tr>
    <td height="28" colspan="12" class="title"><a href="index.html">T. DELANEY&nbsp;·&nbsp; SEAM STUDIO</a></td>

     <td height="28" class="title" align="right"><a href="http://twitter.com/TopherDelaney" target="_blank"><img src="../images/twitter_32.png" alt="Twitter" width="20" border="0" /></a><a href="http://www.facebook.com/pages/Topher-Delaney/47521469003" target="_blank"><img src="../images/facebook_32.png" alt="Facebook" width="20" border="0" /></a></td>
  </tr>
  <tr class="nav" >
    <td height="28" align="left"><a  href="philosophy.html" target="_parent">Philosophy</FONT></a></td>
    <td width="10" align="left" class="nav-dash">|</td>
    <td height="28"align="center"><a href="events.html" target="_parent">Events </a></td>
    <td width="10" align="center" class="nav-dash">|</td>

    <td height="28"align="center"><a href="commissions.html" target="_parent">commissions</a></td>
    <td width="10" align="center" class="nav-dash">|</td>
    <td height="28" align="center"><a href="publications.html" target="_parent">publications</a></td>
    <td width="10" align="center" class="nav-active">|</td>
    <td height="28" align="center"><a href="thingstobuy.html" target="_parent">things to buy</a></td>
    <td width="10" align="center" class="nav-dash">|</td>

    <td height="28" align="center"><a href="blog.html" target="_parent">Blog</a></td>
    <td width="10" align="right" class="nav-dash">|</td>
    <td height="28" align="right"><a href="contact.html" target="_parent">Contact</a></td>
  </tr>
</table>




<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">
<!--     <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
-->
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>

[DrByte]

FAQ on troubleshooting Blank Pages

[tdelaney]

DrByte,

Thank you for the FAQ page. I have turned on ERROR REPORTING and it does not indicate anything other than the fact that it is enabled. I also attempted to use the error logging and only found error logs in the cache that were for a different issue from earlier today.

I checked through the entire CSS section of the code and did not find any missing symbols that I can detect.

One thing that I realized which may be contributing is the fact that the CSS code is landing outside of the <head> tags in the final output HTML. I do not know how to have the tpl_header.php file place the CSS within the <head> tags, but does anyone (1) think this might lead somewhere and (2) know how to do this?

Thank you in advanced for your thoughts!

[DrByte]

One thing that I realized which may be contributing is the fact that the CSS code is landing outside of the <head> tags in the final output HTML. I do not know how to have the tpl_header.php file place the CSS within the <head> tags, but does anyone (1) think this might lead somewhere and (2) know how to do this?

What brought you to that conclusion?

A normal clean new install of Zen Cart puts the CSS stylesheet links inside the <head> section properly. I'm not sure why yours wouldn't be doing that properly, unless you're using a weird template that follows some strange rules.

[gjh42]

"(between the <style>'s)"

This sounds like the OP is putting the styling directly in tpl_header.php instead of in stylesheet.css where it properly belongs.

[DrByte]

"(between the <style>'s)"

This sounds like the OP is putting the styling directly in tpl_header.php instead of in stylesheet.css where it properly belongs.

Exactly. https://www.zen-cart.com/tutorials/index.php

[stevesh]

<style type="text/css">
<!--

body {
margin-top: 30px;
background-color: #000;
}

It appears you've commented out everything after the <style> statement.

[tdelaney]

As Homer Simpson would say... "DOH!!!!"

Thank you everyone for your assistance. It looks like the issue was that comment line that I missed.

It loads up fine in IE now. woohoo!

[DrByte]

LOL - that would certainly be a problem.

However, I would STRONGLY recommend that you put your styling code into the stylesheet instead.
a) because it'll allow it to get cached, making for faster loading
b) because it'll make the HTML generated by the templates smaller and therefore faster to load
c) because it keeps all your custom styling in one place
d) because it makes it easier to support and troubleshoot
e) because it's just the right thing to do

... and shows that you understand conventional templating methodologies, making you look even more professional to those who peek at your template code.