My Tricky Dilemma, But Maybe Not For CSS-Tricks

[k_mcminn]

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…

[k_mcminn]

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

[Mottie]

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%;

}

[k_mcminn]

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.

[Mottie]

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

[k_mcminn]

In here?

.pane_wrap {

margin-left: 25px;

margin-right: 25px;

min-height: 80px;

overflow: hidden;

position: relative;

}

[Mottie]

.ipsPad a.left, .ipsPad a.right {

position: relative;

z-index: 100;

}

[k_mcminn]

Oh wow, what CSS file is that in?

[Mottie]

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

[k_mcminn]

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

[Mottie]

Yes.

[k_mcminn]

That worked, Mottie! Much appreciated!

[Author]

Posts