I am exploring the use of CSS properties display: table-* to style a list of photos. The code below is intended to demonstrate this implementation, but there seems to be an issue with the table layout in Firefox and Safari as indicated by the borders appearing distorted. Interestingly, wrapping the img tags in a <div></div> resolves the display problem.
This anomaly seems to be related to the img tag and its size calculation versus actual space taken. Could this be a bug?
Below is a simplified version of the code highlighting this issue:
<!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>