Attribute only valid on v:image

Ran into an error in IE6 on a site I was developing:

"Attribute only valid on v:image"

The error message popped up on a Google Map canvas I had embedded in the page whenever a user interacted with the map.

The culprit was a combination of DD_belatedpng and a rule included by default in html5boilerplate where all tags were being fixed by DD_belatedpng when the page loaded. Removing the img selector from this rule resolved the error.

FusionCharts, IE6, and "Unknown runtime error"

FusionCharts' JavaScript file makes use of innerHTML to replace a placeholder <div>'s content with the generated SWF. However, on IE6, this causes an "Unknown runtime error".

I am working with version 1.2.4. I have jQuery 1.3 loaded on the site, so I replaced four instances of innerHTML calls with $().html() syntax:

Line 237:
{ n.innerHTML = obj.getSWFHTML(); },false );
became
{ $(n).html(obj.getSWFHTML()); }, false);

Line 242:
{ n.innerHTML = obj.getSWFHTML(); } );
became
{ $(n).html(obj.getSWFHTML()); });

Line 246:
n.innerHTML = this.getSWFHTML();
became
$(n).html(this.getSWFHTML());

Line 251:
n.innerHTML = this.getSWFHTML();
became
$(n).html(this.getSWFHTML());

Another IE z-index bug workaround tip thingy

If you're having trouble getting z-indexes to work right in IE, the order of your style declarations in your css file might matter. Try putting the style code for the element you want to stack on top at the bottom of your css file and see if the problem persists.

Followup: IE6 PNG Alpha Transparency Fix

I, like many others, ran into the issue of <a> links not being click-able when they sit on top of an element upon which the alpha fix has been run.

A hint I got off of this site gave me the answer I was looking for: The element containing the filtered png must not have a position set, and the links within that element must have a position set.

Using jQuery to make LI elements hover-able in IE6

Another necessary hack, this time to overcome IE6's non-support of the hover pseudo-class for LI elements.

This is to be used in situations where navigation is structured using UL, LI, and A elements and styled via CSS.  Please note that additional selectors will be required when implementing this solution: the standard selector (using li:hover notation) and the alternate selector (using li.over notation to support what this JavaScript is accomplishing):

        $(document).ready(function() {
            // Hack to make li's 'hover-able'
            if (document.all && document.getElementById) {
                $("#mainnav > .menu ul > li").each(function() {
                    this.onmouseover = function() { this.className += " over"; }
                    this.onmouseout = function() { this.className = this.className.replace(" over", ""); }
                });
            }
        });

IE6 PNG alpha transparency solution

I know a bazillion solutions have been posted to the interwebs to solve this problem, but I wanted to make a note of one that I found to work quite well:

http://www.twinhelix.com/css/iepngfix/

Min-height fast hack (IE6 sucks)

Blatantly plagiarized from http://www.dustindiaz.com/min-height-fast-hack/:

selector {
 min-height:500px;
 height:auto !important;
 height:500px;
}