Centering not picked up

[tliebig]

Hey Louis,

great to see someone taking care of IEs lacking support for some of CSS' more helpful options. I'm employing the script here:

http://beta.insachenkunst.de/kuenstler/tom-schulhauser/

and although it resizes the image fine, it fails to correctly center the image. Any idea as to why that might happen?

[louisremi]

Hi,
for some reason my script throws an error in IE on page load.
Could you try loading the development version of the script instead of the minified one to help me investigate?
Thanks.

[tliebig]

Sure. I have updated the page to load the development version. The error occurs on line 308, at $(window).on as far as I can see.

[louisremi]

This error is due to the fact that you're using an old version of jQuery.
The "on" method has been introduced in jQuery 1.7

That doesn't explain why your images aren't centered. I'm still
investigating.

[louisremi]

Are you initializing your element with a background size?
$(elem).css( "background-size", "cover" );

[tliebig]

I believe I am. There's both javascript code that adds the css directly to the element as well as a rule for the class that contains "background-size: cover":

from http://beta.insachenkunst.de/wordpress/wp-content/themes/insachenkunst/js/artist-gallery.js line 10:

element.style {
    background-image: url("http://beta.insachenkunst.de/wordpress/wp-content/uploads/Schulhauser-4-Postpanoptisches-Lächeln-4-mittel.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

and http://beta.insachenkunst.de/wordpress/wp-content/themes/insachenkunst/page-kuenstler-einzelansicht.css line 19

.gallery .gallery-large-thumb {
    background-position: center center;
    background-size: contain;
    border: medium none;
    display: block;
    height: 339px;
    margin-bottom: 13px;
    width: 552px;
}

[tliebig]

Just an update: jQuery was previously loaded as version 1.4.4 from Google CDN, causing unmet requirements. I have just updated jQuery to version 1.8.1, but I am still getting the $(window).on error from IE8.

[tliebig]

Hey Louis,

any chance that you can look at the issue? The $(window).on error is gone, but the image still sticks to the left inside the container instead of being centered.

I can see that elements created by jQuery, and they all seem to have the correct size, but since the image is positioned absolute and left: 0, the centering does not occur correctly. I believe the code would have to be updated to calculated the correct value for left, but to be honest I'm lost at where to do so.

You could probably identify and rectify the cause with a glance. Would you mind taking a look at this again?

[graygilmore]

I just ran into this same issue myself. It's being caused by a naughty max-width: 100%; that's occurring elsewhere in your CSS file. In your case, I have a feeling it's this:

.gallery .post img {
    max-width: 100%;
}

Remove that on the elements that you want to use the script on and you should be golden.

[tliebig]

Unfortunately, it did not work for me. I have disabled the max-width: 100% rule at style.css line 148, but the behaviour hasn't changed.

Neither

#content .post img {
    /* max-width: 100%; */
    height: auto;
}

nor

#content .post img {
    /* max-width: 100%; */
    /* height: auto; */
}

helped. Anything else I could try?

[elevente]

I have the same problem, on some window sizes its perfect, but sometimes the image is not centered, sometimes it's even completely outside of the viewing area. Anyone found a solution to this? I don't have max-width anywhere in my CSS, so that didn't solve my problem :(

[graygilmore]

@tliebig if you have a test page up where you're experiencing the issue, I can have a quick look.

[tliebig]

Yes, sure. Right here:
http://www.insachenkunst.de/kuenstler/tom-schulhauser/ it's where it
failing to center on IE8. Thanks for taking the time, I appreciate it!

[graygilmore]

Aaahhh, I see you're using contain and not cover - I'm not sure if the whole max-width thing solves that same issue. I had a quick look and couldn't really see anything. Maybe @louisremi could have a super quick look.

[cabdesigns]

tliebig - I think this is a jQuery version issue. I too was using 1.8.1, and was having problems with centre alignment in IE8 after resize. I changed my jQuery version to 1.7.0 and hey presto, it's fixed. So may be give that a try if you're still looking for a solution.

Ultimately, it appears that there is something in the new version of jQuery that is causing this issue.

[louisremi]

I'd love to have a confirmation of the solution proposed by @cabdesigns
I'm not gonna be able to verify it myself immediatly.