Question

I have this setup:

<div class="fadetoggle">
  <div>Content</div>
  <div>Content</div>
</div>

And this code:

$(".button").click(function () {
  $(".fadetoggle").fadeToggle('slow');
});

In all modern browser I tested it so far it works but in IE8 the div “fadetoggle” just shows/hide. If I use fadeToggle on only a div without children it works in IE8.

How comes? And is there a way to make fadeToggle in IE with my setup working?

Answer 1

Ok, here’s what was happening:

1. IE doesn’t like fades on fixed elements. So I “wrapped” them up in a div and got it to work with this:

   $(“div-wrapper”).children().fadeToggle();

2. On another div inside a “group-div” I had declared position:relative & float:right at the same time in the css. Of course this is redundant anyways and so it was irretating IE I guess.

So I just removed position:relative and everything works fine now.

Thank you.