Home/ Questions/Q 529891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T09:08:20+00:00

I want to use the display: table-* CSS properties to format a list of

  • 0

I want to use the display: table-* CSS properties to format a list of photos. I believe that below is a “correct” implementation of it, in that there’s nothing theoretically wrong with it, but it displays in Firefox and Safari with the table layout screwed up, as you can see by the borders. For a comparison, try wrapping both img tags below in a <div></div>; this displays properly.

This is something specific to the img tag, perhaps how big it thinks it is versus how much space it actually takes. Is this a bug?

The code below is a minimal provocation of this problem.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .photos {display: table; border-collapse: collapse;}
            .photos > div {display: table-row}
            .photos > div > * {
                display: table-cell;
                vertical-align: top;
                border: 1px solid #000;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="photos">
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem seems to be mostly due to the border-collapse. If you remove that, the alignment problem goes away. I can’t seem to find any other discussion of this problem online but I have noticed bugs in the border-collapse: collapse algorithm many times in Firefox and Safari (lines that disappear/reappear as you scroll, etc). This appears to be just another bug in that algorithm.

    You’re are right however, that it is specific to the image, if you wrap the images in divs, the problem goes away:

    <html>
<head>
    <style>
        .photos {display: table; border-collapse: collapse;}
        .photos > div {display: table-row; border-collapse: collapse;}
        .photos > div > * {
            border-collapse: collapse;
            display: table-cell;
            vertical-align: top;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="photos">
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
    </div>
</body>
</html>

    I’ve tested this in Firefox 3.1 in Ubuntu and XP, Firefox 3.5 in XP, Safari 4 in Wine and XP, and Chrome 3 in XP and they ALL exhibit errors in rendering the border-collapse. Only Firefox shows the image table-cell as one pixel low.

    Opera 9.52 in XP oddly does not display the image at all.
    Opera 10.10 in XP behaves like the rest.

    Perhaps there’s something about the spec that causes so many browsers to interpret this way.

    • 0