1

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: enter image description here

Desired: enter image description here

  • 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.

Mike
  • 1,760
  • 5
  • 21
  • 40
  • possible duplicate of [IE8 non-compatibility mode, image with max-width and height:auto](http://stackoverflow.com/questions/1771176/ie8-non-compatibility-mode-image-with-max-width-and-heightauto) – rockerest Feb 11 '13 at 23:46
  • My problem deals with tables, but not sure if that matters. – Mike Feb 11 '13 at 23:47
  • It's unlikely (but not impossible) that it matters. Try setting a width (perhaps `auto` or `100%`) on the parent container (`td` in this case). – rockerest Feb 11 '13 at 23:49
  • Iv'e tried setting the width in every possible manner (in the td, img, and thru css) still nothing. – Mike Feb 12 '13 at 00:09

1 Answers1

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.
Community
  • 1
  • 1
rockerest
  • 10,412
  • 3
  • 37
  • 67