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)
[code=css]
#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;
}[/code]
[code=html]<div id="GalleryPrev iew">
<div id="GalleryPrev iew_VerticalFix ">
<img src="PHP Generated" alt="Image Preview" />
</div>
</div>[/code]
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
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)
[code=css]
#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;
}[/code]
[code=html]<div id="GalleryPrev iew">
<div id="GalleryPrev iew_VerticalFix ">
<img src="PHP Generated" alt="Image Preview" />
</div>
</div>[/code]
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
Comment