Jun 30 2009

WP Ecommerce Plugin Caching Issue in IE Internet Explorer

In working with the WP Ecommerce Plugin, on Wordpress, we’ve noticed that updates to products are not reflected within the front-end when testing with Internet Explorer. We found this to be strictly an Internet Explorer “feature” in our testing. The problem here is – if most are using IE – will we be guaranteed that they’ll get the latest Shopping Cart? The answer is, unless you’ve changed your caching settings, no.

Problem: Internet Explorer Over-Caches pages

Even when the page content is obviously changed, the timestamp forcefully updated, even touching the file won’t budget IE.  There are 3 possible solutions:

Solution 1: Best Solution – Force “No Caching” in PHP

At the very top of your php page, before calling anything, add this mug:


header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Solution 2: Force No Caching in Meta Tags

Add this meta tag inside of your <head> tag:
<meta http-equiv="PRAGMA" content="NO-CACHE">

Solution 3: Quickest Way – Change your URL

When linking to your page, simply add any parameter to your url.  So, if you’re visiting “gobdg.com/about.php” now visit: “gobdg.com/about.php?somestuff=1″

** Note – This will only work one time for each parameter value – you’ll need to change the paramater of true to “somestuff=2″ on next reload.

Solution 4: Become a Fireman

Always a viable option.

IE Caching, Cache References

2 comments   |  tags: , | posted in PHP, Ridiculous

Jun 26 2009

Links Unclickable, Broken in Wordpress Ecommerce Cart Widget (IE)

We have run into an odd issue of our own when implementing the Wordpress Ecommerce Plugin. We noticed that as the WP Ecommerce plugin uses ajax to build the shopping cart items (which is great, allowing visitors to stay on the page and keep shopping), but the problem was that as soon as an item was added, we found that the shopping cart widget became broken, or rather unclickable in Internet Explorer IE 6.

The Problem

Another IE Bug.  I for one didn’t see this one coming, blindsided.  Wow.  In any case, the problem was that:

Our use of the Transparent PNG fix in IE6 triggered another bug: The cart’s contents were inserted using the innerHtml property.  After the innerHTML was inserted, the hasLayout function wasn’t called – rendering our links unclickable.

The Solution

In order to call the hasLayout function, you need to set the object’s position, or zoom, etc.  The cart function can be found in: /wp-e-commerce/wp-shopping-cart.php.  Line 1018 reads:
document.getElementById('shoppingcartcontents').innerHTML = \"".str_replace(Array("\n","\r") , "",addslashes(nzshpcrt_shopping_basket_internals($cart,$quantity_limit))). "\";
Add the following line immediately below it:
document.getElementById('shoppingcartcontents').style.position = 'relative';

no comments   |  tags: , , , | posted in AJAX, CSS

Jun 1 2009

Gap between images within link tags ie only (surprise)

Problem:

You are building your navigation, or template design and for some crazy reason the images (with a font-size:0px) still continue to have a 1px gap between each other in ie (Internet Explorer 6 – 7 particularly).

BIG SURPRISE – another ie bug.  Wow. what a shocker.

Solution/Workaround 1 – Remove line breaks

In many cases, the problem actually lies in IE’s rendering of your html code.  If you have line breaks in between your images, that will for some reason translate to a 1px gap.  So one possible solution is to remove the line breaks giving your something like:
<a href="home"><img alt="" /></a><a href="contact"><img alt="" /></a>
...

Solution 2 – Float that junk

We’ve also found that floating the images will close the gap between images in ie.  So in your style sheet:

<style>
a img {float:left}
</style>

Solution 3: (Gaps below your imgs) – Font-size:0px

A separate issue that you may be having is that images will automatically come preset with a small gap on the bottom (which I believe is reserved for image captions, or alignment within text, etc).  To close this gap:

<style>
a img {font-size:0px}
</style>

Solution 4: Become a White Water Rafting Guide

http://www.salary.com/careers/layouthtmls/crel_display_Cat10_Ser196_Par294.html

Related Image Gap References

2 comments   |  tags: , | posted in CSS

May 22 2009

Z-index Internet Explorer IE6

Problem

z-index is not performing properly in internet explorer, ie6, ie7, etc.

Don’t worry it’s not you, this is yet another bug in IE.  IE does not render z-index properly:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

Solutions/Workarounds

7 comments   |  tags: , ,

Apr 10 2009

Position relative + z-index = IE Bug

The problem

If you’re dealing with absolutely or relatively positioned elements and you’re noticing that the z-index property doesn’t seem to work, you may be encountering yet another IE bug.  In certain cases, IE 6 especially will ignore the z-index property of elements whose parents don’t have a z-index.

The Solution

The credit goes to Nathan Ostgard for his Position Relative, z-index IE Bug fix.  Just give your container, or parent element a z-index of any number.  We added:

z-index:1

5 comments   |  tags: , | posted in CSS, JavaScript/DOM