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.
精彩评论