breakthrough design

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

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

• Closing the gap between list items in IE

Special thanks to a great article over at Webjackalope:

15 Quick Ways to Shrink Page Load Time

Some Odds and Ends from the Article

Here are some quick tidbits that we have seen overlooked by developers in the past:

Check your Website Load Time

Run your pages through the Web Page Analyzer for oodles of load time tips.

Include the Height & Width in Images

This is important for page load time – allowing the browser to render the page, with image placeholders, rather than waiting for each individual image.

Broken paths and images can be a major load time killer

You can check all the images and scripts on your page in using firebug (see below).  Scan through all these mugs and delete anything that is broken, unnecessary, or ugly.

Firebug is Awesome

The firefox add-on Firebug is typically used for js and other code debugging, but it also contains a sick “Net” Console which displays each individual page element, broken links, paths, and load times for the individual elements.

Firebug Net Console

Wordpress Users Only: WP Super Cache Plugin

Download and install the WP_Super_Cache plugin, the defacto standard for anyone who is serious about publishing.

Is there nothing this library can’t do, or can’t be added on to do??  Here we’ve stumbled on how this jquery plugin allows you to fade background colors, images, slide colors from the side/top & even at angles.

Get the jQuery Background Position Plugin

View some Background Transition Examples

Awesome.

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