Grow your CSS skills. Land your dream job.

Firefox has a problem with negative margins?

  • # November 20, 2012 at 10:19 pm

    I have an animation that i have been working for a ridiculous(should have taken 10 mins) amount of time but now that i have it “working” firefox says “oh hell to the no. ” the animation is that an element rises up the screen via a negative margin, instead firefox thinks i am telling it to go the opposite direction. So it goes down 250px. I have searched the internet and seen people complaining of a negative margin in firefox but no fixes. Here is all the relevant code

    .portfolio-thumbnail span {
    font-size: 36px;
    font-family: ‘Allura’, cursive;
    position: relative;
    display: inline-block;
    margin-top: -15px;
    text-shadow:0px 2px 11px #ffe3ba;
    -webkit-animation: margin-slide-down;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: margin-slide-down;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-out;
    -o-animation: margin-slide-down;
    -o-animation-duration: 1s;
    -o-animation-timing-function: ease-out;
    animation: margin-slide-down;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    color: #000;
    }

    .portfolio-thumbnail img {
    height: 100%;
    width: 100%;
    }

    .portfolio-thumbnail:hover {
    opacity: 1;
    -moz-box-shadow: 0px 10px 54px #000000;
    -webkit-box-shadow: 0px 10px 54px #000000;
    box-shadow: 0px 10px 54px #000000;
    -webkit-animation: blacktocolor;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in;
    -webkit-filter: grayscale(0%);
    }

    .portfolio-thumbnail:hover> span {
    -webkit-animation: margin-slide;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: margin-slide;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease-out;
    -o-animation: margin-slide;
    -o-animation-duration: .5s;
    -o-animation-timing-function: ease-out;
    animation: margin-slide;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    margin-top: -250px;
    color: #CC0000;
    }

    @-webkit-keyframes margin-slide {

    from {
    margin-top: -15px;
    }

    to{
    margin-top: -250px;

    }
    }

    @-moz-keyframes margin-slide {

    from {
    margin-top: -15px;
    }

    to {
    margin-top: -250px;
    }
    }
    @-o-keyframes margin-slide {

    from {
    margin-top: -15px;
    }

    to {
    margin-top: -250px;
    }
    }
    @keyframes margin-slide {

    from {
    margin-top: -15px;
    }

    to {
    margin-top: -250px;

    }
    }

    @-webkit-keyframes margin-slide-down {

    from {
    margin-top: -250px;
    }

    to {
    margin-top: -15px;

    }
    }

    @-moz-keyframes margin-slide-down {
    from {
    margin-top: -250px;
    }

    to {
    margin-top: -15px;

    }
    }
    @-o-keyframes margin-slide-down {

    from {
    margin-top: -250px;
    }

    to {
    margin-top: -15px;

    }
    }
    @keyframes margin-slide-down {

    from {
    margin-top: -250px;
    }

    to {
    margin-top: -15px;

    }
    }

    # November 21, 2012 at 2:16 am

    Maybe try and style is using jQuery and use it’s slideUp function.

    At least then it should be browser compatible too and save a load of markup.

    # November 21, 2012 at 5:21 am

    couldn’t reproduce your issue with negative margin but the error i did encounter which was slightly different was resolve by setting the span to position absolute rather than relative.

    # November 21, 2012 at 10:45 am

    @ToxicFire You definitely helped me along the right track. I set the position of the span to absolute, but that moved to adjacent to the image even though the animation was working. Then set display to block, placing it under the img element. Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".