Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Location
    USA
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Internet Explorer Fades in IE do not work with position: relative

    I have a script that fades out a main object which contains some text along with multiple divs with rounded corners, and each one of those divs has the position: relative attribute. My script fades out everything perfectly in all browsers... except IE. The latest IE 9 RC works fine in this respect, but IE 8 and earlier can fade out everything in the main object except the relative-positioned divs. Instead of fading them out, it just hides them, but it fades out the rest of the content in the main object without a problem.

    I've tried many test variations and I have discovered that the problem is with the relative positioning of the divs. IE is not able to fade out (or fade in) divs that are relatively positioned, but I need those divs to be relatively positioned or else the rounded corners will not be placed in the proper locations in each div. I developed a workaround in jQuery for this that fades out each relative-positioned div separately, and this works but it is extremely laggy (as I expected it to be). At this point, I do not know what else to do. I'm having trouble finding another workaround in IE8 (and earlier) that fades out relative-positioned divs.

    If anyone has any other suggestions as to how I can get these relative-positioned divs to fade out in IE like they do in every other browser, I would appreciate your help.
    Last edited by TomCat; 02-25-2011 at 11:37 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I came across a similar issue with IE8 and fadeIn/Out - but had no problem with IE6/7. I solved the issue, after some googling, by applying:

    Code:
    filter:inherit
    to the relatively positioned element.

  • #3
    New Coder
    Join Date
    May 2009
    Location
    USA
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you for your response.

    Sadly, this does not seem to fix the problem in IE. I've searched Google a few times, too, for this specific issue but found no results specifically relevant to my problem. Probably the problem you encountered was different. Though I'd love to pinpoint what exactly IE is having trouble with, I just can't figure it out.

    Would you, or anyone else interested, have any other possible suggestions? Thank you in advance.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •