I have ‘resolved’ this issue but It’d be great if someone could explain what the problem was and why this fixed it so I know for future.
The #header of my site is position: fixed; with a value of top: 0;. When the page is scrolled I use a waypoints plugin (http://imakewebthings.com/jquery-waypoints) to add a class of .sticky on the #header element and then in the CSS set the value top: -65px; – this leaves about 20 pixels worth of the header overhanging the page (as intended). Then on #header.sticky:hover I set top: 0; to return the header to its original position. When the mouse leaves the header area it returns to its offscreen position.
This works great …..but not in IE8.
To cut a long strong short, in IE8 and below on hovering over the header nothing happened. It wouldn’t move/display at all.
I managed to get this working by applying a style to #header:hover. I’ve since set this to top: 0; so it makes sense but it would actually work if I applied background: #f00; for example – which makes no sense?
Any someone explain this? Why IE8 needed a style on the default state as well as the hover?
Thanks,
Steve
