Margin issue on gallery

Hello all,
I noticed an issue with margin in a few browsers, when I go to my gallery:
http://test.petpal.co.il/dogs

There’s a margin on the images to center them inside the div when nessasry (please tell me if there’s an easier method to center them, since atm I calculate via PHP and then just put the result in margin-left:-Xem; property to center the image).

however when you zoom in the browser (fully) and then zoom back out, the margin breaks and the images are not centered anymore, take as example the dog on the left in the first line, you’ll notice that after you zoom in and then out his head gets outside the view of the div.

Any ideas?

Why have you got a negative margin right on that first image? Without the margin the image is fine (same for all the other images I think).

If you set an image to display:block (which they already are in your page) and use margin:auto then they will automatically center in the width of the container.

I think you must mean something else? Are you talking about cropping large images so that they are central in the page even when they are bigger than the space available? Even then that would not work if the focus of the image isn’t the center.

What happens if you remove your php margin-resizing. If you think your margin resizing is necessary then it should be in px and not em because your container is not sized in ems and does not grow proportionately with the margin.

Well I know it can never be accurate but yes I think if i will have the images centered inside their containers (both horizontally and vertically) then it will be more acuurate at least.
margin:auto doesn’t seem to center them, plus the issue i mentioned above is still there even after my margin calculations are removed, here’s an image:

What browser is that?

In Firefox there is no change now in the image when increasing text-size and it looks much better. Webkit is much better also although you do need to refresh after you’ve resized back smaller (another webkit bug).

Its chrome, and yes I checked on FF and it indeed looks fine there.
IE11 works also fine, opera is also bugged…

Anything I can do…?

Edit: fixed it, was direction:rtl issue, gave direction:ltr to the div that contains the image… :stuck_out_tongue:

I was just about to suggest that :smile:

hehe well I think I finished another phase in my new site - the gallery :smile:
This was kinda hard and challanging, but im happy with the result, support down to 315px wide and any height :smile:
falling in love with html5 and css3 :stuck_out_tongue: (and a bit of jquery :wink: )

Just too bad that IE8 has no support for media queries, there might be some issues in that browser on the gallery page, like the search form would overlap the content, or does the html5shiv script solves it? @PaulOB

You can polyfill that with respond.js or css3mediaqueries.

thanks, included respond.js for IE8 ;p