Alright! I figured out some fixes for this template that fix some bugs and make it more compatible with a variety of browsers. I hope this can help someone else as well. Here's what I did:
- There is a bug with the footer that causes the bottom shadow line to display in the wrong location on longer pages sometimes. When this happens, if the user rolls over the drop down menu it immediately fixes the position of the line on the page. Refreshing the page will make the problem return.
The fix is to seperate navSupp and navSuppWrapper from the generation of this line.
Copy tpl_footer.php to the zen cart override directory and call the new bottomLine class. Here's what should be added:
<!--bof-navigation display -->
ADD THIS:<div id="bottomLineWrapper">
ADD THIS:<div id="bottomLine">
ADD THIS:</div></div>
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
Then, edit stylesheet.css. Add the new classes for bottomLine and bottomLineWrapper:
#bottomLineWrapper {
width:100%;
margin:0 auto;
margin-top:-6px;
/float:left;/
position:relative;
top:2.18em;
}
#bottomLine {
margin:0 auto;
text-align:center;
width:70.3em;
padding-top:1em;
}
Then, change the following instances of navSupp to bottomLine. ONLY change these instances. Leave the others alone.
- end of changes for narrow header */
CHANGE THIS:* html #centerColumnWrapper, * html #centerColumnWrapperb, * html #headerWrapperb, * html #headerWrapperc, * html #dropMenuWrapperc, * html #dropMenuWrapperd, * html #bottomLine {
background:none!important; /* Hides the transparent shadows from older versions of IE */
}
#centerColumnWrapper {
background:url(../images/shadowRight.png) repeat-y 100% 0;
}
#centerColumnWrapperb {
background:url(../images/shadowLeft.png) repeat-y 0 0;
}
CHANGETHIS:#bottomLine {
background:url(../images/shadowAlpha_bot.png) repeat-x top;
}
All set! That should fix this.
- I've been trying to find a fix for the hovering in the space where there is no text problem with ie5, ie5.5, and ie6 on the drop-menu. I previously was doing some stuff with <li> that was helping, but didn't work for the categories. Forget about that! There is a much easier way!! This new way fixes the problem with no side-effects....except for ie5.5. I'll explain in #3.
Make this change in stylesheet_header_menu.css:
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;
ADD:/* Hides from IE5-mac */
ADD:height: 1%;
CHANGE:/* End hide from IE5-mac */ padding: .6em 0; text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu li a.noLine {border:none;}
That fixes the hovering over no text problems with ie5, ie5.5, and ie6. :)
3)But.....It introduces a new problem with ie5.5. The menus basically stop working. I played around until I found a way to restore 99% of this functionality in ie5.5. But, just an FYI, ie5.5 doesn't play nice with this template anyway. It looks terrible. The header logo blows up really large, and the breadcrumb, body, and header are all aligned differently. Weird, because it all works fine in ie5 with the fix I wrote about before this post.
Anyway, here's how to make the menus functional in ie5.5 again after implementing the fix for ie5 and ie6. Make these changes to stylesheet_header_menu.css:
div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
CHANGE: /line-height:1em;/
width:16.667%;
}
div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#006699; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
}
CHANGE: div#dropMenu li:hover {display: block;}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
Now everything works with the menus except when you hover over the blank space around the words of drop-down menu titles (HOME, CATEGORIES, INFORMATION, etc...). But, the white space in the drop-down menus themselves works fine. I tested this tweak with Firefox 2, IE7, IE6, IE5, and IE5.5, and they don't seem to have any negative effects with other browser, yet this fix problems in IE5.5.
- Last -- In IE 5, 5.5, 6, and 7 if you increase the text size only once (not twice, that works fine) the SHOPPING CART will fall to the next line and mess up the menus. Here the fix. Add this in stylesheet_header_menu.css:
iv#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
/line-height:1em;/
width:16.667%;
ADD: *width:16.649%;
}
Whew! That was a lot of work. :) I hope someone finds these tweaks useful. Maybe jettrue will include some of them in the next release of this template.
The only big bug/compatibility problem that I can find which is left is the blank subcategories when you leave a subcategory and return in IE7. I'm not sure I have the skills to fix this problem, but I hope someone tackles it someday.
