(height = 48)
(height = 16384)
(height = 16385)
(height = 32767)
(height = 32768)
Apparently, web browsers don't like to render extremely tall images:
| Browser | Height Limit |
|---|---|
| Firefox | 32767 pixels (2^15 - 1) |
| IE | 16384 pixels (2^14) |
Not that I expect anyone to use an image with a pixel-width set above those limits. However, while implementing a design sent to me by a web design firm, I noticed that some of the images would disappear on pages with extremely lengthy content. Why? They had put an image that created a vertical divider line in a table cell and set the width to 35 pixels and the height to 100%. Since the content exceeded 32,767 pixels, IE rendered the image as 1-pixel in height, and Firefox rendered it completely black.
In this case, I removed the image and applied a background color via a CSS style to the table cell to create the vertical divider. Not that we should have been using tables to create the layout, but that choice wasn't up to me.
| Original (height = 48) |
Max IE height (height = 16384) |
Max IE + 1 (height = 16385) |
Max FF height (height = 32767) |
Max FF + 1 (height = 32768) |
|---|---|---|---|---|
|
|
|
|
|