CODEWITHSUNDEEP
jqueryinternet-explorer-7opacity
simekadam
simekadam

Reputation: 7384

Problem with opaque image overlay IE7

I'm having trouble setting an opaque overlay div over an image in IE7. Every other browser (note: IE6 and older haven't been tested) handle my code and markup well, but IE7 doesn't. The overlay is not opaque, and the underlying image is not shown.

Here is my markup.

    <li>
        <a href="/AquaTrade/designclub/index.php/cs/program/12-program/89-miloslav-cejka">
        <div style="background-image: url(http://10.0.0.3/AquaTrade/designclub/images/stories/program-ico/ikona-cejka-a-club.jpg);">
            <div class="catImg" style="opacity: 0.6; ">
                <!--img src="http://10.0.0.3/AquaTrade/designclub/images/stories/program-ico/ikona-cejka-a-club.jpg" alt="" /-->
            </div>
            <div class="catTitle"><span>Miloslav Čejka</span></div>
        </div>
        </a>
    </li>

The opacity on div.catImg is set by jQuery fadeTo function, so in IE is it alpha-opacity Following function set the opacity

function createCategories() {

    jQuery("#categories div.catImg").fadeTo(0,0.6);
    jQuery("#categories div.catImg").mouseenter(function() {
        jQuery(this).fadeTo(0, 0 );
    });
    jQuery("#categories div.catImg").mouseout(function() {
        jQuery(this).fadeTo(0, 0.6 ); 
    });
    makeCategoriesPosition();
}

Upvotes: 1

Views: 539

Answers (3)

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11568

I recreated a sample for you with a correct model:

Css is:

<style type="text/css">
    #wrapper 
    {
        position:absolute;
        }
    span 
    {
       display:block;
       background-color:black;
       opacity:0.6;
       filter:alpha(opacity=60);
       width:1024px;
       height:768px;
       position:absolute;
       top:0;
       left:0;
        }
</style>

jQuery is:

$(function () {

        $('a').hover(function () {
            $(this).find('span').fadeTo(0, 0);
        }, function () {
            $(this).find('span').fadeTo(0, 0.6);
        });

    });

Html is:

<div id='wrapper'>
    <a href='go somwhere'>
        <span></span>
        <img src='Chrysanthemum.jpg' alt='A red flower' />
    </a>
</div>

Upvotes: 1

Naftali
Naftali

Reputation: 146310

You cannot use opacity in IE css.

see this article for more

Upvotes: 2

wesbos
wesbos

Reputation: 26317

Its because you are nesting a div within a link. Its probably somehow not displaying as a block element because its inside the link tag.

Upvotes: 1

Related Questions