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

My Tricky Dilemma, But Maybe Not For CSS-Tricks

  • # August 5, 2012 at 1:18 pm

    I’ve recently installed a hook that displays random images for a Gallery application that I have. I like it, but I just can’t figure out how to get the images center-aligned inside its main div, between the slider arrow images. Apparently, the way this hook is setup, it’s not very easy to create and assign my own class. Any help or guidance is greatly appreciated!

    My site: Nintendo Nerds Forums

    Here’s what each Browser looks like, Safari being the worst-looking.

    Internet Explorer 9
    Your text to link…

    Chrome 21
    Your text to link…

    Firefox 14
    Your text to link…

    Safari 5
    Your text to link…

    # August 6, 2012 at 6:32 pm

    I’m hoping no one forgot about me. If not, I’ll continue to be patient.

    # August 6, 2012 at 6:54 pm

    Try getting rid of the “padding-left: 1%” in:

    .download_pane li {
    margin-bottom: 15px;
    margin-left: 18px;
    height: 100%;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
    position: relative;
    padding-top: 2px;
    padding-left: 1%;
    # August 6, 2012 at 7:20 pm

    Thank you, Mottie!

    That seemed to fix the biggest issue; Safari.

    I did notice one thing in Chrome through. It has nothing to do with the edit you had me perform. When trying to click on the right arrow, the cursor has to be positioned on the very right edge of the arrow image. It was doing that before and I’m not sure about how to fix that part.

    # August 6, 2012 at 7:54 pm

    It looks like the UL is overlapping the arrows. Try making the arrows have a position relative with a higher z-index.

    # August 6, 2012 at 8:21 pm

    In here?

    .pane_wrap {
    margin-left: 25px;
    margin-right: 25px;
    min-height: 80px;
    overflow: hidden;
    position: relative;
    # August 6, 2012 at 11:55 pm
    .ipsPad a.left, .ipsPad a.right {
    position: relative;
    z-index: 100;
    # August 7, 2012 at 12:50 am

    Oh wow, what CSS file is that in?

    # August 7, 2012 at 9:57 am

    That isn’t in a css file, that’s what you need to add to fix the arrows :)

    # August 7, 2012 at 3:04 pm

    I see, Mottie. Can I simply add that to the same CSS file then?

    # August 7, 2012 at 4:56 pm


    # August 7, 2012 at 5:07 pm

    That worked, Mottie! Much appreciated!

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

You must be logged in to reply to this topic.