I´ve made this animating logo with CSS3 animations that drops down from outside the browser window.
See it in action: http://mainland.se/css3/
The logo is placed in a AP-div and positioned -100px from the top. As you can see it works fine in most browsers.
When it comes to IE9 the problem is that because the staringpoint of the logo is -100px top the logo dosen´t
show up at all. I tried with a conditional statement for IE9 but no luck.
Anyone who has a suggestion?
Use jQuery to hide your div on page load. Negative positioning is trouble.
Thanks for the suggestion, now it works in IE when I changed the logo position from top: -100px to top: 0px;.
Now the animation in the other browsers are now doubled instead.
Is there a way to in jquery to prevent the slidefunction in Chrome. Opera an FF and just fade in the
logo in IE?
this animation I can see very fine in my IE 10 and too and a bit less perfectly in my FF 19.0.2.
This IE 10 I installed a short time before with a certain "stomach rumbling" because I thought it was associated with greater difficulties, but "whizz" it was done! Since then I'm very satisfied with it and I'm experimenting with different already published CSS3 possibilities. You will probably have to insert a statement referring to this IE 10 thing on your website.
And here a hint I got from Paula (thanks again) in another forum: If you wish to see how the code is used in IE10 then read http://msdn.microsoft.com/en-us/library/ie/hh673558.aspx.
Thanks to you all for your suggestions.
My objective was to make the logo visible in IE9 and down dispite the logo position of top:-100px; and not caring about any animation.
I finally fixed the issue. Of course the conditional statement for IE lte 9 should be inserted at the bottom of the CSS stack.
A practicle example of CSS specificity?