Exploring some basic HTML here. In Google Chrome (v57) and Firefox (v55), the two cells to the right have equal heights, while in Safari (v11) they do not. In Safari, the top cell adjusts to fit its content, leaving the remaining space for the bottom cell.
I'm wondering - is one of these outcomes correct and the other a glitch? Is there a simple solution to make Safari display the same results as Chrome (could it be due to browser styling differences)? I've examined it closely and can't find any discrepancies in user agent stylesheets.
img {
max-width: 100%;
display: block;
}
.image-cell {
width: 150px;
}<table border=1 cellspacing=0 cellpadding=0 bgcolor="#3faaed">
<tr>
<td rowspan="2" class="image-cell">
<img src="http://www.rizwanashraf.com/wp-content/uploads/2009/04/gorgeous-chrysanthemum-3d-wallpaper.jpg" />
</td>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>There are countless ways to create an image with two equally sized boxes next to it - that's not the issue at hand. The question is about understanding the difference in behavior and whether we can apply simple styling to standardize them. This inquiry is educational; multiple layout options exist, but I'm focusing on this particular scenario.