IE Compatibility

[beggarsbones]

my site is having issues with IE 7 and below that make it unusable. (www.beggarsbones.com/store)

what SEEMS to be going on is that in IE my logoWrapper is not staying to its size (fixed ~280x280), or IE isnt listening and it is laying blank background over my center column. (see attachment : ie)

i commented out the logowrapper altogether to see if that was my issue, and the center content is still cut off in the same place, just moved up - see attachment: sanslogowrapper. this is making me think it is not just the logowrapper.

i've been playing around with conditional comments to talk to IE 8 and have seen changes, but have not been able to determine where or what i need to make it work. i'm assuming this is the way to go, as it works fine in most non-ie browsers.

any help is much appreciated!!!

[Website Rob]

Validating your code is always a good idea.

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

<div id="headerWrapper">

<!--bof-navigation display-->
<div id="navMainWrapper">

<div id="navMain">

<ul class="back">
</div>

<div id="navMainSearch"></div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">

<tr>
</div>


There are other errors but the above is probably creating the problem with IE.

[beggarsbones]

i ran it through a validator and it came up with errors, i just didnt know what to make of them. i took out the <ul and <tr> and its still screwy, i'll run it through again and see what i can make of it.. thanks, rob!

[beggarsbones]

ok, i've validated my css (still a couple minor issues, but nothing that should be doing this) and validated my tpl main page and header - all that seem to really be coming up are issues in the prolog. that shouldn't be doing this, right? (i also tried taking out the ul and tr tags, then putting them back in and closing them, no luck)

this sounds dumb, but are there any other php files that interact between the main page and header? something else that i should validate?

[stevesh]

Looking at your site with the Web Developers in both IE and FF, it looks like you have your whole main page inside the headerWrapper div. Could that be causing a problem?

[Kim]

You do still need to get the extra tags out of there and use valid XHTML. That should help some, but you are using overlapping layers of images and appear to have created some z-index problems - IE6 shows problems and IE7 has different issues. You may get some relief by giving those hidden elements a height and or giving them a relative position.

[Website Rob]

Not sure why you validated your CSS but not your HTML?


<div id="navMain">
<ul class="back">
</ul>
</div>

If you are not going to use the UL then remove it entirely.


<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">

<tr>
<td id="navColumnOne" class="columnLeft" style="width: 150px">

What happened to the TR tag? Should be there but it's not.


<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
<li>
</li>
</ul>
</div>

</ul>
</div>

Remove the UL tag.

[beggarsbones]

rob - i did run it through the html validator through the web developer toolbar, the problem i had was that i didnt know where to find the errors in php pages. eg the first error i get is

Error Line 65, Column 62: document type does not allow element "td" here; assuming missing "tr" start-tag.

…="navColumnOne" class="columnLeft" style="width: 150px">

when i look for 'class=columnLeft' in all catalog/admin files it comes up empty in the dev toolkit. i've been running the tplheader and tplmainpage through via direct input and trying to make sure those are kosher, see my question if there are any other php files that interact with those.

so what youre saying is i should put the tr tag back where it was in tpl header, where it was highlighted in red in your previous post?

and where are you getting this from?

<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
<li>
</li>
</ul>
</div>

</ul>
</div>

this is what i have in my tplheader

<?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('productLIsting');
  }
  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">
</div>
<div id="navMainSearch"></div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper"></div>
<div id="trouble"></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-->
<br class="clearBoth" />

</div>
<?php } ?>

[beggarsbones]

ok, now i see that you were getting that block from the footer, has since been fixed.

[Website Rob]

Oh my, somebody is having a good time... chasing their tail.

In any Template there are 3 main files you will work, all in YOUR_TEMPLATE/common
- tpl_header.php
- tpl_main_page.php
- tpl_footer.php


Although 'tpl_main_page.php' starts with a lot of lines the actual Web page code starts around line 75 with:

<table width="784" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper" align="center">

and ending around line 212 with:
</table>

Everything inbetween is for your main page Content.

Use the other two files "only" for what you want in the Header and/or Footer.


Right now you've got some newly created errors which need to be fixed.

BTW, after this is all sorted out you will then need to work on errors in your coding logic. It is a simple fix for the IE display problem but doing all this first helps you to understand those 3 main files and the importance of validating your code.