Forums / Templates, Stylesheets, Page Layout / White space shows in IE but not in Firefox ?

White space shows in IE but not in Firefox ?

Locked

Views: 7,045

Results 1 to 16 of 16
This thread is locked. New replies are disabled.
11 Oct 2007, 1:48 AM
#1
jbraz avatar

jbraz

New Zenner

Join Date:
Mar 2007
Posts:
59
Plugin Contributions:
0

White space shows in IE but not in Firefox ?

I have followed all the instructions I could find in the threads about removing the shite space below the header but still have a small problem.

I moved the top nav bar down below the header by copying the bof_navagation display down below the eof_branding display in the tpl_header.php file. That worked fine but it left a large white space between the bottom of the header and the top of the moved nav bar.

I then took out the

 
<br class="clearBoth" />

in the same file. It did take out most of the white ( actually it's not white now, it's the color of my background for that section ) , but there is still a small area left. But, it's not there when I view it with Firefox. Only in IE.

I also tried the fix below but it still didn't take out the white area and messed it up for Firefox.

 
Instead of removing <br class="clearBoth" /> change it do this:
<div class="clearBoth"></div>
Then, in your stylesheet, change:

Code:
.clearBoth {
 clear:both;
}to:

Code:
.clearBoth {
 clear:both;
 height:0;
 font-size:0;
 line-height:0;
 margin:0;
 padding:0;
 }

So can anyone tell me how to get rid of the remaining white area between the bottom of the header and top of the nav bar ?

here is the link

http://thepixelpatch.com/store

Thanks !

15 Oct 2007, 10:56 PM
#2
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Hi jbraz,

If you remove the <div id="logo"> and everything within it your white space will disappear.

If your not sure what I mean, post your tpl_header.php and I will show you what needs to be trashed.

17 Oct 2007, 3:22 AM
#3
jbraz avatar

jbraz

New Zenner

Join Date:
Mar 2007
Posts:
59
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Thank you RuFus ! I have it figured out now and fixed. :)

4 Nov 2007, 11:28 PM
#4
theredhead avatar

theredhead

New Zenner

Join Date:
Aug 2007
Posts:
33
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

I'm having the same problem with the white space and have not been able to solve it. I have tried the above suggestions today, which have reduced but not eliminated it. At least it was a step in the right direction.

http://www.handspunyarn.org/

I haven't figured out what I need to change to get rid of the white space completely when displayed in IE. Works fine in Netscape. Here's my 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 3392 2006-04-08 15:17:37Z birdbrain $
 */
?>
<?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">
    <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>
  </div>
 
  <!--eof-branding display-->
  
  <!--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>
  </div>
  <!--eof-navigation 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 } ?>

I'm also trying to figure out how to make the Navigation (Home, Login) be located in the Category Bar. I've seen it, but don't know how to accomplish it. I thought I had it, but when viewed in another browser it's not working right. As you can see below, I am getting different displays from Netscape and IE. If you have any suggestions I'd be grateful.

Thanks

-the redhead-

5 Nov 2007, 12:00 PM
#5
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Hi theredhead,

IE doesn't like empty <div> tags and as you are not using a tagline you still have one in your tpl_header.php, remove that and your problem should be resolved...

<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>

As for the second issue, remove the following code from your tpl_header.php

  <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>
  </div>

and replace catalog\includes\templates\yourtemplate\templates\tpl_modules_categories_tabs.php with this:

<?php
/**
 * Module Template - categories_tabs
 *
 * Template stub used to display categories-tabs output
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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_modules_categories_tabs.php 3395 2006-04-08 21:13:00Z ajeh $
 */

  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>

<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
     <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 }?>

<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
5 Nov 2007, 4:52 PM
#6
jbraz avatar

jbraz

New Zenner

Join Date:
Mar 2007
Posts:
59
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Hi RuFus !

I thought I had it fixed on mine but I guess I don't. Tried your suggestion above but still have a small space there. Any other suggestions ? Here is my template

http://skrappin.com

Thanks !!

5 Nov 2007, 5:03 PM
#7
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Hi Jbraz,

The <div id="logo"> is still there? I quickly tested your page after removing it and you space disappeared..

what you need to remove will look something like this

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

Post your tpl_header.php if you are not sure and I will highlight what needs to be removed...

5 Nov 2007, 5:16 PM
#8
jbraz avatar

jbraz

New Zenner

Join Date:
Mar 2007
Posts:
59
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Ok, got it now !! L I was removing the code you had in the post for theredhead

```

<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>

 
I had decided I was just gonna have to live with that silly space. LOL !
 
Thank you so much !!
7 Nov 2007, 5:14 AM
#9
theredhead avatar

theredhead

New Zenner

Join Date:
Aug 2007
Posts:
33
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

RuFuS:

As for the second issue, remove the following code from your tpl_header.php

and replace catalog\includes\templates\yourtemplate\templates\tpl_modules_categories_tabs.php with this:

RuFuS -

Thanks for the pointers. This worked perfectly in both Netscape and IE.

Your suggestion for getting rid of the white space, however, didn't get IE to fall in line. I removed this line> <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>

but it didn't remove the white space.

When I tried removing the line you suggested to Jbraz> <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>

it took away my entire header.

I messed around with a couple of other thing, but had no success. Are there other areas of the code I should be looking at to resolve that darned white space?

Thanks.

-the redhead-

7 Nov 2007, 1:35 PM
#10
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Hi theredhead,

I just tried this, removing

<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>

seems to solve the issue in IE7, what version of IE are you using??

8 Nov 2007, 3:05 AM
#11
theredhead avatar

theredhead

New Zenner

Join Date:
Aug 2007
Posts:
33
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Okay -

I've double checked my tpl_header.php file twice, and that line isn't in there. I had 2 people besides myself check in IE, and the white line is still there.

Hmmm. Gremlins?

-the redhead-

8 Nov 2007, 1:04 PM
#12
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

:oops: I am sorry, you need to remove the tagline wrapper as well

    <div id="taglineWrapper">
    </div>

Also you may have noticed in IE that when you put your mouse over your header image it says "Powered by Zen Cart :: The Art of E-Commerce"
If you go to catalog\includes\languages\englishyourtemplate\header.php

Line #20 : define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce'); 

You can redefine it to something more suitable

8 Nov 2007, 5:53 PM
#13
theredhead avatar

theredhead

New Zenner

Join Date:
Aug 2007
Posts:
33
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Thanks again RuFuS. I'll try all these things as soon as I get home. The reminder on the header text is great. I've been working with the biger issiues on this test site, so I haven't delt with the smaller things yet.

I appreciate your help very much - it's beginning to come together.

-the redhead-

10 Nov 2007, 2:35 AM
#14
theredhead avatar

theredhead

New Zenner

Join Date:
Aug 2007
Posts:
33
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

Thanks again - the dreaded white space is now gone in IE.

-the redhead-

12 Nov 2007, 3:54 PM
#15
helensama avatar

helensama

New Zenner

Join Date:
Dec 2006
Location:
Northwest Connecticut
Posts:
87
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

HI I am replying because I just read through all the posts and am having a similar problem ONLY IN IE, I set up a special spreadsheet for IE using this link http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=493 but now have COMPLETELY CONFUSED myself with trying different things with padding and margin on different elements and class ids and can't get anything to work. Here is the website ---> http://www.greenmountainorganics.com/ I really appreciate any help you could give me as I think I have exhausted trying things out myself --- I'm using Firefox to help figure this out, but the problem is not occurring in Firefox, so I feel as if I am making stabs in the dark. Thank you Helen

8 Jan 2008, 1:53 PM
#16
monkeytastic avatar

monkeytastic

Zen Follower

Join Date:
Dec 2006
Posts:
141
Plugin Contributions:
0

Re: White space shows in IE but not in Firefox ?

RuFuS:

:oops: I am sorry, you need to remove the tagline wrapper as well

<div id="taglineWrapper">
</div>
> If you go to catalog\includes\languages\english\yourtemplate\header.php
> 
> ```php
Line #20 : define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce'); 
```You can redefine it to something more suitable

I've done what you say but there's no change :(

<?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 $ */ ?> <!--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))) { ?> <?php if (HEADER_SALES_TEXT != '') { ?> <?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--> <?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-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--> <!--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 } ?> ```