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

[AsraiLight]

Have you found a solution for this problem? I am having the same trouble, but I can't seem to fix it. Any help/insight you can provide would be much appreciated. :)

[Atli]

I'm sorry to say that I did not find any way to work around this.

The cause of this is a bug in IE8's awesome new standards-supporting rendering engine (sarcasm intended) which, until fixed (if ever), will cause table-cell elements to scale out of proportion like that.

I suppose a JavaScript solution would be possible.
This only appears to happen when the contents (in my case, an image) with max-width set scales down to exactly the value specified.
If you were to catch those cases with JavaScript and shrink the image further, it should, in theory, circumvent the problem.
Or you could just have JavaScript dynamically scale the image, skipping the max-width scenario altogether.

I haven't tested this (I've abandoned my Windows partitions since I posted this), so I can't say for sure, but it at least sounds plausible.

[drhowarddrfine]

Have fun with these. Especially the last one:

The following regressions are present in IE 8:

* Min-width on new block formatting context beside a float is sometimes treated as width.
* Percentage width floats cause justified text to move.
* Max-width fails on floats with auto overflow.
* Scrollbar height is added onto max-height instead of subtracted from it.
* Max-height acts as height on elements with scrollbars.
* Combining max-height, float and overflow:scroll will cause the entire page to disappear.

[AsraiLight]

Well, I think I figured it out! ...at least for my specific problem, which has to do with table cells. I noticed that when I tried using divs, the resize problem didn't happen...but using tables screwed up the formatting of the cells. (Normally I wouldn't use tables, but I needed a fixed grid-like layout, and divs just don't cut it for that.)

Anyway, I added the style "table-layout: fixed;" to my table's stylesheet, and it works in both IE 8 and IE 7. Not sure if this might help your div problem, but at least it's something...

[drhowarddrfine]

@AsraiLight
Oh? I normally think these people are incompetent but they do a pretty good job doing that without tables.

[AsraiLight]

Of course...becaus e it's not a grid. Your example is made to be more fluid. I've tried doing images of differing sizes with captions in boxes which are the same size and lined up side-by-side, but I can't get it to work across the board. Different instances need constant tweaking to get them to look right, which I'm not willing to do. The tables just work.

Plus, I'm not using them for my site layout, just for the content, which isn't going to be redesigned...so it doesn't really matter.

[aim1900]

@AsraiLight
Thanks, man, it does work for divs. I simply added the "table-layout: fixed;" to my outter div (display: table;) and set its width to the max-width of inner img (previous I didn't set this as in firefox the original trick works perfect). This is necessary otherwise the fixed layout of table won't work. Here is what w3c says to fixed layout:

Fixed table layout algorithm:
•The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells

[drhowarddrfine]

@AsraiLight
I don't think MSN.com is fluid, and it is set up as a grid. I would show you a couple personal examples online but I won't (personal reasons) and they work in all browsers though, yes, IE always causes problems.

[adinas]

I was able to solve this by putting the content in the td in a div. For example:

<td style="width:100px"><div style="width:100px"><img src="..." style="max-width:100px" /></div></td>