Grow your CSS skills. Land your dream job.

slide up boxes…images not appearing

  • # June 17, 2011 at 8:14 am

    Hi, I have just put the slide up boxes into a site. Everything works fine in the browsers, testing through Dreamweaver, but when the site goes live the images that should appear on rollover, disappear. Does anyone have any ideas why this might be happening?

    # June 17, 2011 at 8:17 am

    No one can help unless you provide a link or code, preferably a link. Post back

    # June 17, 2011 at 8:22 am

    Thanks, http://www.janebdesign.co.uk

    # June 17, 2011 at 8:45 am

    Were you trying to add HTML5 features?

    # June 17, 2011 at 9:05 am

    I was using the CSS3 transitions, slide up boxes, on this site

    # June 17, 2011 at 9:07 am

    In the boxes on hover the boxes included images for flickr, facebook and twitter, but they are not appearing.

    # June 17, 2011 at 9:15 am

    Right, but you are using


    Your doctype shows xhtml…

    Also, what browser is this not appearing in specifically?

    # June 17, 2011 at 9:31 am

    Safari and Firefox.

    .slide-up-boxes a:hover div {
    opacity: 1;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    }
    .slide-up-boxes a:nth-child(1) div { background: #EBAC8B url(images/flickr-2.png) 4px 4px no-repeat; padding-left: 120px; }
    .slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/facebook.png) 4px 4px no-repeat; padding-left: 120px; }
    .slide-up-boxes a:nth-child(3) div { background: #9A8F9A url(images/twitter.png) 4px 4px no-repeat; padding-left: 120px; }
    a:link {

    These are the images that aren’t appearing.

    # June 17, 2011 at 9:37 am

    Try this:

    .slide-up-boxes a:nth-child(1) div { background: #EBAC8B url(http://cdn.css-tricks.com/images/flickr-2.png) 4px 4px no-repeat; padding-left: 120px; }
    .slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://cdn.css-tricks.com/images/facebook.png) 4px 4px no-repeat; padding-left: 120px; }
    .slide-up-boxes a:nth-child(3) div { background: #9A8F9A url(http://cdn.css-tricks.com/images/twitter.png) 4px 4px no-repeat; padding-left: 120px; }

    You still need to fix the rest of your code

    # June 17, 2011 at 12:27 pm

    I did try that. It hasn’t made a difference. I’m sorry I don’t really understand why it would. I have only been designing web sites for about 5 months so I don’t know what you mean by fixing the rest of the code.
    Thanks for trying to help!

    # June 17, 2011 at 1:19 pm

    You have 19 Errors.

    You have an XHTML Doctype but are using HTML5 elements in some cases. Try fixing those errors before implementing the sliding boxes.

    *I tried going to the image by URL with no luck* Check to see if your images are in the right place.

    # February 14, 2012 at 11:10 am

    …Maybe it’s a paths issue?
    ../images/facebook.png – or even ../../images/facebook.png to go up one or two levels

    # February 14, 2012 at 12:01 pm

    @ChristopherBurton nailed most of the issues but that’s just the start.

    The images are appearing with Chrome (Webkit) but it’s causing all sorts of other errors.

    You seem to be using a lot of empty paragraph tags for some reason plus there are some strange declarations in your ‘head’ along with a lot of other weird things.

    # September 13, 2012 at 7:10 am

    Put “../” in front of images/facebook.png and is working fine.

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

You must be logged in to reply to this topic.

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