Treehouse: Grow your CSS skills. Land your dream job.

Anything Slider – Whats wrong?

  • # April 11, 2011 at 1:58 am

    So I am using the anything slider to switch pages on this simple resume site. Why isn’t it getting the correct height for ‘portfolio’ in Google Chrome? It works fine in the rest of the browsers. Chrome has rarely been the culprit for me. Here is the link:

    As you can see in portfolio, there are more portfolio items that are not visible, so the div is being resized shorter than the content.

    Any help would be great! Thanks.

    # April 11, 2011 at 3:25 am

    Do you have floats that are left uncleared? One other thing that sometimes works is to run your code through the validator. This can show you errors that if you fix it might fix your problem. you have 27 errors and 10 warnings. A lot of them can be fixed. I saw problems with your body tag and head tag. This could surely cause a problem.

    # April 11, 2011 at 3:54 am

    Thanks for pointing that out, however that didn’t fix the problem. I do have a clearfix and I also applied it to .block which is each portfolio item. Any other ideas? Thanks.

    # April 11, 2011 at 8:01 am

    Hi Austin!

    The problem appears to be that the images are loaded after the height of the panel is calculated. So the easiest solution would be to change

    $(function(){ ... })


    $(window).load(function(){ ... })

    Or if that solution isn’t the best, you could set the image height and width in the css

    .portfolio img { width; 425px; height: 230px; }
    # April 11, 2011 at 3:34 pm

    That did the trick! Thank you very much! =)

    # April 11, 2011 at 7:53 pm

    Oh btw… I forgot to mention that I noticed in your code you were animating using


    That won’t scroll correctly in Opera. I’m not sure if you even care, but check out this post on how to fix it.

    # April 11, 2011 at 8:13 pm

    Hey now Mottie, don’t hate on Opera users.

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

You must be logged in to reply to this topic.