Question

Thank you for looking at my question.

I have successfully integrated jCarousel with the Zoomer plugin (found here). It works EXACTLY the way I want it to in all browsers I have checked except -SURPRISE!- Internet Explorer…

If you check this page in FF, you’ll see that the mouseover magnifies the blank white boxes, adds a red border and animates a little box with the alt attribute.

If you check the page again in IE, the magnify & red boxes work, but not the little box with the alt attribute.

I tried adding an IF to the head but I don’t think it’s working correctly (on OSX, so no IE). Here is that code:

    <!--[if IE 9]>
    <style type="text/css" media="screen">
    ul.thumb li img.hover
{
    border: 2px dotted red;
    border: none;
}
ul.thumb li .title
{
position:absolute;
width:103px;
height:40px;
margin:0px;
font-weight:900;
padding:0px 0 0 0px;
text-align:center;
color: #FFF;
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.9);
display: block;
}
    </style>
<![endif]-->

I appreciate everyone’s time and input.

Thank you!

Answer 1

I have discovered through further research that the rgba(#,#,#,#.#) – the a stands for ALPHA and is a fancy way to control transparency, which does not work with IE. I have changed the stylesheet to read as so for IE 8 & 9:

background-color: #FF0000;
filter:alpha(opacity=80); /* For IE8 and earlier */
opacity: 0.8;

I then changed the IF statement to address IE 6 compatibility to reflect the same code.