Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why did this CSS Sprite stop displaying in Firefox?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36504
    lip420
    Member

    Hi~
    I am not an expert here. I had created a CSS sprite a week ago or so and it was displaying properly in FF, but now it’s suddenly not displaying at all.

    I checked safari and google and it displays fine on those browsers. This is the uncompressed code for the sprite that I put into my index.css file:

    .sprites {
    background-image : url(/my/sprite/image.png);
    background-color : transparent;
    background-repeat : no-repeat;
    }

    #hover_jpg {
    height : 35px;
    width : 14px;
    background-position : -0px -0px;
    }

    #left-bg_jpg {
    height : 1px;
    width : 232px;
    background-position : -14px -0px;
    }

    #left-bot_jpg {
    height : 37px;
    width : 232px;
    background-position : -246px -0px;
    }

    #left-bottom_jpg {
    height : 13px;
    width : 232px;
    background-position : -478px -0px;
    }

    #left-top_jpg {
    height : 32px;
    width : 232px;
    background-position : -710px -0px;
    }

    #log-in-arrow_jpg {
    height : 7px;
    width : 8px;
    background-position : -942px -0px;
    }

    #nav-bg_jpg {
    height : 35px;
    width : 1px;
    background-position : -950px -0px;
    }

    #nav-left_jpg {
    height : 35px;
    width : 11px;
    background-position : -951px -0px;
    }

    #nav-right_jpg {
    height : 35px;
    width : 11px;
    background-position : -962px -0px;
    }

    #nav-sep_jpg {
    height : 35px;
    width : 3px;
    background-position : -973px -0px;
    }

    #right-bg_jpg {
    height : 1px;
    width : 232px;
    background-position : -976px -0px;
    }

    #right-bottom_jpg {
    height : 18px;
    width : 232px;
    background-position : -1208px -0px;
    }

    #right-sep_jpg {
    height : 2px;
    width : 176px;
    background-position : -1440px -0px;
    }

    #right-top_jpg {
    height : 18px;
    width : 232px;
    background-position : -1616px -0px;
    }

    #spacer_gif {
    height : 1px;
    width : 1px;
    background-position : -1848px -0px;
    }

    #submit-but_jpg {
    height : 22px;
    width : 74px;
    background-position : -1849px -0px;
    }

    And here’s an example how I replaced the original image with a sprite image:

    .login a{display:block; background-image: (#log-in-arrow_jpg); background-repeat: no-repeat; background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

    Could this be a problem just with FF? I had other problems with it recently.

    Thanks~

    #96099
    Paulie_D
    Member

    A link would be good.

    Oh…and please use the code wrapping feature (it’s the one next to the “I”.

    And another ‘Oh’…those are some large numbers for a sprite..how exactly are you using it?

    #96114
    lip420
    Member

    Thanks for your reply.
    It’s for background images. I created the sprite with a generator. I inserted the above code into my index.css and then changed the references? to the image:

    .login a{display:block; background-image: (#log-in-arrow_jpg); background-repeat: no-repeat; background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

    Before I had the sprite the code was like this:

    .login a{display:block;	background-image: url(../images/log-in-arrow.jpg);	background-repeat: no-repeat;	background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

    So after I made the sprite I just changed url(../images/log-in-arrow.jpg) to (#log-in-arrow_jpg).

    I don’t want my site to show up in search, so it’s esl inside r (dot) com

    It was weird because it was working for about a week and now not.

    #96120
    lip420
    Member

    I did some testing and it turns out it’s not the sprite. I replaced the new css with the old and the problem still remains.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.