I am encountering the same frustrating problem that has been asked here a few times:
Fluid images in IE and FireFox (max-width)
Why doesn't IE respect table width with fluid image child
Both of these solutions offer the "table-layout:fixed;" solution.
However in my case, I am helping a friend who runs a simple multi-user wordpress site, and has a few extra restrictions:
- It needs users to be able to format bulk image posts with very little HTML knowledge.
- Image posts are done via a widget that reformats [img] into a linked image. Unfortunately there is no alternative to this.
I suggested the below code, which works very cleanly in Chrome and Safari:
<table class=" aligncenter" width="95%" cellpadding="3">
<tr>
<td>[img]Image 1[/img]</td>
<td>[img]Image 2[/img]</td>
<td>[img]Image 3[/img]</td>
<td>[img]Image 4[/img]</td>
<td>[img]Image 5[/img]</td>
</tr>
</table>
The desired outcome that works in Chrome and Safari is like this
However IE and Firefox show it like this
I had hoped I could just toss a 'style="table-layout:fixed;"' into the table tag, but of course life isn't that simple. I even tried adding it to each tr and td tag, but this produced zero change.
Is there any other way to force IE and Firefox to get images to respect table width and resize accordingly?
Or is there another way to do this with a div-based architecture instead?
Very frustrating, and having no stylesheet access is very handcuffing, but I expect there must be a way.
Thanks in advance!!