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-26-2011 at 12:37 AM..