First off, if you have no interest in knowing how I did it, and just want to get it working, feel free to grab it from my github account.
The version of the library I am using is the The jQuery ColorPicker Plugin posted at www.eyecon.ro/colorpicker/. The problem is really quite simple; the CSS file uses transparent background images for both the small window that displays the color in the “colorSelector” DIV and the “.colorpicker_color div” DIV.
So the solution is to apply “iepngfix.htc” to each of the DIVs that use transparent backgrounds. So first you will need to download the iepngfix package from TwinHelix and install the iepngfix.htc file in the root of your public directory (along with the blank.gif). After that you will need to call the iepngfix.htc file by adding the following to your CSS file;
JS File Requires These
************************/
.colorpicker_color div, .colorpicker_color div div { behavior: url(“iepngfix.htc”) }
/************************
SlideDown Demo Requires These
************************/
#colorSelector2, #colorSelector2 div, #colorSelector2 div div { behavior: url(“iepngfix.htc”) }
/************************
Pop-Up Live Preview Demo Requires These
************************/
#colorSelector, #colorSelector div { behavior: url(“iepngfix.htc”) }
and that should do it. Also, feel free to add other transparent elements into the chain of ID’s and classes before the { behavior: url(“../iepngfix.htc”) }. If this does not work for you at first, be sure to check and make sure you have the correct paths to the iepngfix.htc file and have the blank.gif loaded in the same directory as the iepngfix.htc.
