Question

Ok I am using a piece of javascript called Captify. It adds a small pop up to images for you with text in. Works great in all browsers accept IE9. IE9 fades everything within the popup div. I have read its a child element issue but I can not fix it. As captify can not be found anywhere online any more I will include all the code for that along with the css below then the code on my page. If anyone could help me stop the fade I would be very grateful as it has coursed me major problems.

Java

jQuery.fn.extend({
captify: function(o){
    var o = $.extend({
        speedOver: 'fast',      // speed of the mouseover effect
        speedOut: 'normal',     // speed of the mouseout effect
        hideDelay: 500,         // how long to delay the hiding of the caption after mouseout (ms)
        animation: 'fade',      // 'fade' or 'slide'
        prefix: '',             // text/html to be placed at the beginning of every caption
        className: 'caption'    // the name of the CSS class to apply to the caption box
    }, o);
    $(this).each(function(){
        var img = this;
        $(this).load(function(){
            $this = img;
            if (this.hasInit){
                return false;
            }
            this.hasInit = true;
            var over_caption = false;
            var over_img     = false;
            //pull the label from another element if there if there is a 
            //valid element id inside the rel="..." attribute, otherwise,
            //just use the text in the title="..." attribute.
            var captionLabelSrc = $('#' + $(this).attr('rel'));
            var captionLabelTitle = !captionLabelSrc.length ? $(this).attr('title') : captionLabelSrc.html();
            var captionLabelHTML = !captionLabelTitle.length ? $(this).attr('alt') : captionLabelTitle;
            captionLabelSrc.remove();
            var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this);
            var wrapper = toWrap.wrap('<div></div>').parent();
            wrapper.css({
                overflow: 'hidden',
                padding: 0,
                fontSize: 0.1
            })
            wrapper.addClass('caption-wrapper');
            wrapper.width($(this).width());
            wrapper.height($(this).height());
            //transfer the border properties from the image to the wrapper
            $.map(['top','right','bottom','left'], function(i){
                $.map(['style','width','color'], function(j){
                    var key = 'border-'+i+'-'+j;
                    wrapper.css(key, $(img).css(key));
                });
            });
            $(img).css({border: '0 none'});
            //transfer the margin properties
            $.map(['top','right','bottom','left'], function(t){
                var key = 'margin-'+t;
                wrapper.css(key, $(img).css(key));
            });

            //create two consecutive divs, one for the semi-transparent background,
            //and other other for the fully-opaque label
            var caption         = $('div:last', wrapper.append('<div></div>')).addClass(o.className);
            var captionContent  = $('div:last', wrapper.append('<div></div>')).addClass(o.className).append(o.prefix).append(captionLabelHTML);

            //override hiding from CSS, and reset all margins (which could have been inherited)
            $('*',wrapper).css({margin: 0}).show();
            //ensure the background is on bottom
            var captionPositioning = jQuery.browser.msie ? 'static' : 'relative';
            caption.css({
                zIndex: 1,
                position: captionPositioning
            });

            //clear the backgrounds/borders from the label, and make it fully-opaque
            captionContent.css({
                position: captionPositioning,
                zIndex: 2,
                background: 'none',
                border: '0 none',
                opacity: 1.0
            });
            caption.width(captionContent.outerWidth());
            caption.height(captionContent.outerHeight());

            //pull the label up on top of the background
            captionContent.css({ 'marginTop': -caption.outerHeight() });
            //function to push the caption out of view
            var cHide = function(){
                if (!over_caption && !over_img)
                    caption.animate({ marginTop: 0 }, o.speedOut); 
            };
            //when the mouse is over the image
            $(this).hover(
                function(){ 
                    over_img = true;
                    if (!over_caption) {
                        caption.animate({
                            marginTop: -caption.height()
                        }, o.speedOver);
                    }
                }, 
                function(){ 
                    over_img = false;
                    window.setTimeout(cHide, o.hideDelay);
                }
            );

            //when the mouse is over the caption on top of the image (the caption is a sibling of the image)
            $('div', wrapper).hover(
                function(){ over_caption = true; },
                function(){ over_caption = false; window.setTimeout(cHide, o.hideDelay); }
            );
        });
        //if the image has already loaded (due to being cached), force the load function to be called
        if (this.complete || this.naturalWidth > 0){
            $(img).trigger('load');
        }
    });
}
});

Now the CSS for captify

/* caption styling */

.caption {
color: #ffffff;
padding: 0.6em;
font-size: 10px;
display: none;
cursor: default;
/* remove these 4 lines below if you want 
the caption to span the whole width of the 
image
width: 82%;
/*border-top: 1px solid #303030;
border-right: 1px solid #303030;*/

/* background / transparency */
background: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
margin-bottom: 5px;
}

.caption a {
border: 0 none;
text-decoration: none;
background: #000000;
padding: 0.3em;
color:#FFFF00;
}

.caption a:hover {

text-decoration:underline;
}

.caption-wrapper {
float: left;
}

br.c { clear: both; }

now my page

<link href="/js/captify/sample.css" rel="stylesheet" type="text/css" /><script     type="text/javascript" src="/js/captify/captify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.captify').captify({
    // all of these options are... optional
    // ---
    // speed of the mouseover effect
    speedOver: 150,
    // speed of the mouseout effect
    speedOut: 200,
    // how long to delay the hiding of the caption after mouseout (ms)
    hideDelay: 100,
    // 'fade' or 'slide'
    animation: 'fade',      
    // text/html to be placed at the beginning of every caption
    prefix: '', 
    // the name of the CSS class to apply to the caption box
    className: 'caption'
});
});
</script>

  <div id="services">

  <ul >

  <li >

      <img src="/images/sports.png" width="169" height="121" class="captify" rel="caption1" />
                <div id="caption1"><h4>Watersports</h4>
<p>View all the sports we offer on the lakeside.</p></div>   

  </li></ul></div>

and the extra css i use

#services {
width: 570px;
margin-top: 370px;
height: 130px;
}
#services ul li {
float: left;
height: 128px;
width: 184px;
margin-right: 5px;
} 

Answer 1

Since IE opacity handling sucks I suggest you ditch all together. For the background, you can use a transparent png(1×1 repeating) to get the same effect. Or if you are using IE only css, you can define the background to use the png for IE only. I think this will save you lots of time trying to get across this issue

Edit: of course do not forget to set opacity to one in the IE css