Fluid images in IE and FireFox (max-width) - html

Question

I'm trying to do a fluid design, so the images will resize down, when browser windows is resized.
I used max-width, and that worked well for Chrome, Safari and opera, but in IE and FireFox it does not work (the images are shown with their full size, which is much bigger than width of page itself).
I know some people might tell me to use just width: 100%; but that resizes small images to size of parent element, which is not ok.
Does somebody have any solution to this? It has to be pure HTML & CSS, no JS.
img {
max-width: 100%;
height: auto;
line-height: 0;
border: 0;
}
The image is basically in Table thats inside of a div, thats inside of a div.
Not actual code (but simplified version of how it is), as it would take a lot more space:
<div class="blabla">
<div class="blablabla" style="max-width: 1110px;">
<table><tr>
<td> Text, random, ladida, text
<img src="random_source.lol"/></td>
</tr></table>
</div>
</div>
The thing is, I wan't all images to scale down if needed, not only some.
Thanks.
Ps.: I already googled a lot and red topics here without success.

Answer 1

Your code works just fine across browsers.
See this demo: http://jsfiddle.net/abhitalks/mxmzjnaL/1
Problem is with your table. Give your table and/or td some size and a table-layout:fixed; to your table.
See this: http://jsfiddle.net/abhitalks/mxmzjnaL/2
Relevant CSS:
table {
table-layout: fixed;
width: 50%;
}
td {
width: 100%;
}
img {
max-width: 100%;
height: auto;
line-height: 0;
border: 0;
}
Note: Use percent units for the width of table to keep it fluid.
.