IE8 display: table-cell and max-width bug?

[Atli]

Hi.

I'm setting up a small photo-album-type thing, where I use PHP to set up a list of images for visitors to click through.
That's all simple enough.

However, I'm having a weird bug in IE8.

Because the images can all be of different sizes (nothing I can do about that... outside my control), I use a CSS trick to get them all centered both vertically and horizontally, and scaled down to a proper size.

Basically, I put the image tag inside two div tags, the first one to align the divs horizontally, and the second to align the image both horizontally and vertically.
Then the image tag scales down images that are to large using the max-height and max-width styles.

That all looks like this:
(Added the borders to see the exact position of the divs)

#GalleryPreview {
    width : 400px;
    height : 290px;
    margin : 0 auto;
    border : 1px solid #0000ff; /* For debuging */
}
#GalleryPreview_VerticalFix {
    width: 400px;
    height : 290px;
    display : table-cell;
    vertical-align : middle;
    text-align : center;
    border : 1px solid #00ff00; /* For debuging */
}
#GalleryPreview img {
    max-width : 400px;
    max-height : 290px;
}

<div id="GalleryPreview">
    <div id="GalleryPreview_VerticalFix">
        <img src="PHP Generated" alt="Image Preview" />
    </div>
</div>

This works in all the standard supporting browsers. Everything is scaled down and centered perfectly. IE7 fails to do the vertical alignment, but that's good enough for IE.

IE8, on the other hand, does something much worse.

For images that scale down to less then the set max-width, this works perfectly to. It centers them both vertically and horizontally.

But when images scale down to exactly the max-width, the table-cell appears to forget it was scaled down, expanding itself until it reaches the width of the original image size. But it still centers the image correctly... just way out of place.
(See the images I attached. One is from Firefox, the other IE8)

I'm thinking this must be a bug in IE (shocking, I know). I mean, the image is scaled, but it's original width is being used by it's parent, which is not the case with the height.
Either this was the intended behavior and the height is bugged, or it's not and the width is.
(Edit: I found this bug report. Seems to be it)

In any case, does anybody know a workaround, or another method to center the images?
I'll keep looking, hopefully find something before I just drop IE support altogether :)

Thanks,
- Atli

[wolfgang abbas]

@JKing
That is right. My client wants it that way.

[JKing]

Okay, well I suggest starting a new thread about your topic, posting the code you are working with, explaining whats not working and explaining how it should work/look.

I have experience with HTML emails, and getting them to render in the majority of clients. You don't want to use divs at all. Infact you want to code your html emails like it is the 1990s using tables. Inline styles are also the way to go.

[JIM LU]

thanks JKing . thanks,you let me know that using your knowledge flexibly and don't stuck in your mind-set! So,I use the table to solve it.But,i'll
think the solution of the question about the "max-" and "table-cell" ！Thanks,i 'll warn myself don't stuck in my past!