CSS Sprites works awkward.. How can I fix it?

[Ozan]

Hi,

I'm trying to add a banner after header using css sprites. In my another site; http://www.hamilekalmakicinyapilmasigerekenler.com in the sidebar it works without any problem, and the sprite images changes instantly. And generates a button when the mouse is over.

But in another site that I've installed Genesis Framework and Dynamik childtheme, ( http://www.nasilhamilekalinir.com ) after adding images using sprites method, while changing images, it makes an odd movement up and down, instead of changing the position in the image instantly.

Does anybody know why this is happening? Is it sth related with genesis' "fancy dropdown" feature. Becuase it seems like sth is slowing the instant movement, or sth other is happening. Not sure about that.

Any help would be greatly welcomed.

[Gary Jones]

dynamik-min.css includes:

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:     all 0.2s ease-in-out;
    -ms-transition:       all 0.2s ease-in-out;
    -o-transition:          all 0.2s ease-in-out;
    transition:              all 0.2s ease-in-out;
}

Since the sprite works by moving the background position, its being animated over a fifth of a second, instead of being done instantly. I'm not sure if there's a setting in Dynamik, or whether you'll want an extra ruleset to override the transition properties for that particular anchor.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Author]

Posts