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

[drhowarddrfine]

Will that be your first and last post here?

[adinas]

Is there a problem with the content of the reply?

[drhowarddrfine]

Since that was your first post, I was curious whether we would hear from you again.

Tables should never be used for layout so your solution is a step backwards. The result is he already found a solution using CSS but the real problem is IE, as it almost always is. So crippling modern browsers just for IEs sake by using a table is just a bad idea.

[adinas]

Well, I think that saying tables should never be used is a bit harsh. I don't use tables to layout a page but if in your page you are showing tabular data. like a list of results with headings, wouldn't you use a table for that? And if one of those columns showed images then in order for it to work in IE (Which I would have to agree really sucks in this case) my solution would work. I went over the other solutions and thought that giving another option to choose from would be good. No?

[drhowarddrfine]

Well, I think that saying tables should never be used is a bit harsh. I don't use tables to layout a page but if in your page you are showing tabular data.

That's why I did NOT say that.

if one of those columns showed images then in order for it to work in IE (Which I would have to agree really sucks in this case) my solution would work.

IE is the worst browser on the planet. Inept at best.

There is never any reason to use a table to fix a layout problem.

[VoiceOfReason]

There is never any reason to use a table to fix a layout problem.

Hmmm...how about the reason that CSS can be turned off?

Although I agree that tables are not the preferred method, they are reliable in certain situations. To state otherwise is just plain ignorant and not worthy of an 'Expert' tag.

[Atli]

Hmmm...how about the reason that CSS can be turned off?

That is not a reason, it's an excuse.

Granted, if you are designing your websites for the original release of the Netscape Navigator browser... sure, tables might make sense. In reality, assuming browsers have managed to implement the 12 year old core web design technology used by virtually every modern website designed since the turn of the century, is an extremely fair assumption. (Even for IE... up to a point.)

And those who deliberately turn CSS of are either are aware of how it might affect them and willing to accept it, or deserving of having modern webpages fall apart on them. You don't turn off the technology used to style webpages and walk away from it without it affecting the rendering of websites. Abandoning modern practices and reverting to the early 90's to accommodate these sort of users is just silly.

Perhaps it is best to phrase it as:
There is never any VALID reason to use a table to fix a layout problem.

And note that using a table to fix an IE bug is NOT a valid reason. If IE is buggy let the fallout fall on the users of IE, not the web developers. - We aren't helping anybody by continually covering up how buggy IE actually is.

[drhowarddrfine]

In addition, if CSS is turned off (and who would ever do that?), HTML pages should have been created to still work and be presented in a reasonable manner.

[wolfgang abbas]

I just signed in, because I was pretty annoyed by the tone of drhowarddrfine comments. Anyway, it tricked me in to become a member.

I figured out that MS changed the rendering engine for the latest MS Outlook from IE to MS Word. This leads to a lot of problems concerning image AND div resizing. I haven't found a way to max-width pictures, table-cells or divs. Tried all of them.

My quick solution: All images are resized via php via a parameter in the source-url (...&width=150). If anybody knows a css solution, this would be appreciated!

Kind regards from Germany,
Wolf

PS: i use div's, so far...

[JKing]

@wolfgang abbas
Are you attempting to code html emails?

[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!