Responsive images not respecting width inside table-cell

HTML & CSS
1

Hi guys,

Here is an example page that works correctly inside chrome but not in firefox or IE9 : http://yordanstoev.com/test/test_123.html
The problem is that the image is not resized to the correct width for the cell and the cell is stretched not respecting the set width of 50%.

Setting image width:100%; solves the problem, but smaller images will stretch to full width.

Thanks for the help.

2

If you want cells to obey the widths properly then you need the table-layout:fixed algorithm.

e.g.


<div style="width:50%;margin:0 auto;backgorund:green;[B]display:table;table-layout:fixed"[/B]>
	<div style="display:table-row;">

etc...................