image hover transitions and browser compatibility
so I have this problem with my hover images.
I want to get rid of the initial flicker as they load. But since I got a transition on them, I cannot use sprites. I also tried placing the images in html (and hiding them) but that doesn't work either. I didn't even expect this to happen, because I use an image proloading script.
Also, when I test the website in IE and Firefox, the transition (on logo and the arrow at the bottom) doesn't work.
Another problem is when I put 'margin: auto' on the logo, in Firefox it ignores the margin-top: 40px so the logo is right at the top of the site. But when I don't include margin: auto, the logo isn't centered in IE. I don't know how to deal with this browser compatibility BS, because there is no way of using vendor prefixes on things like margin.
Here's the whole code as a file, since it is quite long:
To sum it up, I need to:
1. fix the flickering of the images the first time I hover over them
2. 'enable' transitions in other browsers.
3. fix the position of the logo, as I described above.
I'd really appreciate any help, because I want to get this done finally, but there's always something that comes in the way.