Image not centering in IE8 when using max-width?

Question

I have a table that contains an image, but for some reason I cannot get certain images to center correctly. When I apply max-width:170px the image resizes correctly, but it does not center. In every other browser (even IE7) everything looks good, but IE8 chokes. Here is the FIDDLE http://jsfiddle.net/5VT7e/ .

Note: I created the fiddle in Chrome, but went to view it in IE8 and I guess JSFIDDLE doesn't work in IE8. None-the-less you can view all the code ;)

Here's a screen shot of the problem:

Problem:

Desired:

• First image looks okay
• Second image is shifted to the right
• Third image looks okay
• Fourth image is shifted to the right
• Fifth image is shifted to the right

Pretty much any image that max-width:170px effects is shifted to the right.

Thanks for having a look.

Answer 1

This answer provides two possible solutions:

1. Set width: auto on your images
2. Provide a width on the direct parent element of the images.