简体   繁体   中英

IE7 - Div alignment problem when using Jquery

I have a div that I am fading using jquery, however whenever the div gets clicked it doesn't align properly like it does in FF or Chrome. I only have IE7 so I am testing it in that and I do not know if IE8 is behaving the same way.

Jquery code (for the fade effect):

$(document).ready(function(){


$("div.a").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
})
.click(
    function() {
        $("div.a").css("z-index","10");
    $(this).css("z-index","8");
});

});

Here is the css code:

div.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    border: 0px;}
img.b {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;}
div.fadehover {
    position: relative;}

And here is the html code:

<a href="javascript:animatedcollapse.toggle('vimeo')">
<div title="Vimeo" class="fadehover">
<div class="a"><img src="images/table_14b.png" width="112" height="105" style="position: absolute;" alt=""></div>
<img src="images/table_14.png" width="112" height="105" alt="" class="b">
</div></a>

Kind of hard to explain what is happening but if you watch what the buttons do in Chrome compared to IE7 you will see the problem.

http://woodfinx.net to see it in action

Give a static height, and if possible width, to the logo layer and button layer. This will fix the issue with MSIE.

Ok. Now I have no idea why this works, or if this is another one of IE 7's rendering issues. Now this is what I did to get the clicky thing to work in IE:

To the table cells that hold the buttons add the following style

position: relative;

That for some strange reason seems to work in IE 7 all. Unless that was just the Developer Toolbar doing something strange.

Also I noticed that that buttons do not return to normal state when hovered off in IE 7.

edit Just out of curiosity, why are you using tables for that simple layout? Div's would be perfect and easy for that layout.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM