开发者

IE7 - Div alignment problem when using Jquery

开发者 https://www.devze.com 2023-02-09 08:21 出处:网络
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

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 {
    开发者_如何学Pythonposition: 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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号