Great in IE8 and Firefox - Thumbs Down Otherwise...

[stiggy100]

Hi guys,

After a whole day of working on this I have all my tabs at the top of the page how I want them.. BUT I feel I have cheated the system, rather than done what is a stable fix. It works fine on firefox and IE8 but is no good on anything else as everything is thrown out.

I believe I'm fighting the PHP file with the stylesheet because I want to position all the tabs in an 'absolute' fashion. My PHP statement in the tpl_header is this:


<li<?php echo (($current_page_base == 'contact_us') ? ' class="current">' : ' class="contact">');?><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo '<span>' . BOX_INFORMATION_CONTACT . '</span>'; ?></a></li>

and my stylesheet definition is:

#navMain ul li.contact a {
margin:0;
position: absolute;
top: 10px;
right: 778px;
padding: 0 5px 0 4px;
float:left;
background: url(../images/tableft.gif) no-repeat left top;
color:#854401;
text-decoration:none;
}
#navMain ul li.contact a span {
display:block;
background: url(../images/tabright.gif) no-repeat right top;
padding:2px 14px 2px 5px;
color:#854401;
}
#navMain ul li.contact a:hover {
background-position:0% -42px;
}
#navMain ul li.contact a:hover span {
padding:2px 14px 2px 5px;
background-position:100% -42px;

I don't know what to remove/add to allow for smooth display in less intelligent browsers as I just about know enough to experiment but I don't understand fully...

Is it a 5 minute project or a big overhaul?

Any advice would be appreciated

Steve

[clydejones]

Hi guys,

After a whole day of working on this I have all my tabs at the top of the page how I want them.. BUT I feel I have cheated the system, rather than done what is a stable fix. It works fine on firefox and IE8 but is no good on anything else as everything is thrown out.

I believe I'm fighting the PHP file with the stylesheet because I want to position all the tabs in an 'absolute' fashion. My PHP statement in the tpl_header is this:


<li<?php echo (($current_page_base == 'contact_us') ? ' class="current">' : ' class="contact">');?><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo '<span>' . BOX_INFORMATION_CONTACT . '</span>'; ?></a></li>

and my stylesheet definition is:

#navMain ul li.contact a {
margin:0;
position: absolute;
top: 10px;
right: 778px;
padding: 0 5px 0 4px;
float:left;
background: url(../images/tableft.gif) no-repeat left top;
color:#854401;
text-decoration:none;
}
#navMain ul li.contact a span {
display:block;
background: url(../images/tabright.gif) no-repeat right top;
padding:2px 14px 2px 5px;
color:#854401;
}
#navMain ul li.contact a:hover {
background-position:0% -42px;
}
#navMain ul li.contact a:hover span {
padding:2px 14px 2px 5px;
background-position:100% -42px;

I don't know what to remove/add to allow for smooth display in less intelligent browsers as I just about know enough to experiment but I don't understand fully...

Is it a 5 minute project or a big overhaul?

Any advice would be appreciated

Steve

You should be able to make the changes you want by positioning ONLY the #navMainWrapper absolutely. and leaving the #navmain declarations as they were originally.

You will also need to make an edit to tpl_header.php

#navMainWrapper {
position:absolute;
top: 5px;
left:10px;
/*margin: 0 auto;
padding: 0;*/
background:none /* url(../images/nav_tab.gif) repeat-x*/;
font-size:1.2em;
font-weight: bold;
/*width:845px;*/
height:24px;
}

For tpl_header.php

make the following changes

<?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) {
?>

<div id="headerWrapper">
<!--bof-branding display-->
<div id="logoWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li<?php echo (($this_is_home_page) ? ' class="current">' : '>');?><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo '<span>' . HEADER_TITLE_CATALOG . '</span>'; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li<?php echo (($current_page_base == 'logoff') ? ' class="current">' : '>');?><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_LOGOFF . '</span>'; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li<?php echo (($current_page_base == 'login') ? ' class="current">' : '>');?><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_LOGIN . '</span>'; ?></a></li>
<?php } } ?>
<li<?php echo (($current_page_base == 'contact_us') ? ' class="current">' : ' class="contact">');?><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo '<span>' . BOX_INFORMATION_CONTACT . '</span>'; ?></a></li>
    <li<?php echo (($current_page_base == 'account') ? ' class="current">' : ' class="account">');?><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_MY_ACCOUNT . '</span>'; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li<?php echo ((in_array($current_page_base,explode(",",'checkout_shipping,checkout_payment,checkout_confirmation,checkout_success'))) ? ' class="current">' : '>');?><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_CHECKOUT . '</span>'; ?></a></li>
<?php }?>
    <li<?php echo (($current_page_base == 'shopping_cart') ? ' class="cart current">' : ' class="cart">');?><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo '<span>' . HEADER_TITLE_CART_CONTENTS . '</span>'; ?></a></li>
</ul>

</div>
<!--<br class="clearBoth" />-->
</div>
<!--eof-navigation display-->

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<div class="date"><?php echo strftime(DATE_FORMAT_LONG);?></div>
    <div id="logo"><?php echo zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT);?></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 } else {?>
<div id="navEZPagesTop">&nbsp;</div>
<?php } ?>
<!--eof-header ezpage links-->

</div>
<?php } ?>

[stiggy100]

Once again a lifesaver Clyde,

I'm all ship shape on that with one slight snag that Ive lost the links on the tabs? Did I enter it wrong as I double checked the tpl_header and the stylesheet and couldn't see Id made an obvious omission!

Thanks

Steve

[clydejones]

Once again a lifesaver Clyde,

I'm all ship shape on that with one slight snag that Ive lost the links on the tabs? Did I enter it wrong as I double checked the tpl_header and the stylesheet and couldn't see Id made an obvious omission!

Thanks

Steve

It might be because your logo 150px high is conflicting with the navigation bar.

You could try positioning the logo so that it sits below the navigation bar. You'd also need to increase the height of the logowrapper.

[stiggy100]

Hey Clyde,

Have tried that by crushing the logo and fixing its position to be well clear of the tabs, it seems it isn't the culprit sadly...

Steve

[clydejones]

Hey Clyde,

Have tried that by crushing the logo and fixing its position to be well clear of the tabs, it seems it isn't the culprit sadly...

Steve

Did you put the tabbed menu inside the logowrapper

<div id="logoWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">

[stiggy100]

Ah I see...

The logo wrapper <div id="logoWrapper"> was defined after the <!--eof-navigation display-->

I moved it up to:

<div id="headerWrapper">
<div id="logoWrapper">
<!--bof-navigation display-->

And now she's a runner so to speak...

Thanks so much... I'm hopefully structurally where I want to be now and couldn't have done it without all your assistance. genuinely appreciated

Steve