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

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