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.
Use an image preload method that will load the image in background and then the image is available for use when needed. When you do that then your other issues should be fixed.
... and please remember to wrap code with forum BBCode tags:-
[CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]
If you can't think outside the box, you will be trapped forever with no escape...
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)