(In the past, I relied on conditional IE statements to exclude a portion of my website from IE Browsers. Unfortunately, this method is no longer supported in IE10.)
Currently, I have three images displayed on the header of my site, stacked one on top of the other. The bottom image is a .gif featuring a moving arm, the middle image is a high-resolution version of the same image without the arm (as .gifs do not offer the same image quality), and the top image is a high-resolution image of just the arm. Using CSS, I've set it up so that when the top image is hovered over, the arm will disappear revealing the .gif with the moving arm.
You can see this setup in action here: (In Chrome or Firefox, the hover-over animation works perfectly. In IE versions prior to 10, only the .gif will display without the hover-over effect. Additionally, in IE10, the solo-arm image does not align correctly with the background image, although the animation still works).
I suspect the issue lies within the following code:
#chicken {
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#chicken:hover {
opacity:0;
}
In Chrome and FF, the width and height attributes work as intended, aligning the arm correctly with the background. However, in IE, this does not seem to be the case.
If anyone could provide guidance on how to ensure the alignment of the arm with the image in all browsers or suggest an alternative method for achieving the desired result specifically in IE10, it would be greatly appreciated.