Those greedy table cells...

[Tarh]

As part of the interface I'm designing, I need to create a <table>. The table consists of a 3x3 grid, 9 cells in total. The 3 vertical cells on the left and right side (1st and 3rd <td> of each <tr>) must always be 24px in width. I would like the 3 remaining cells, which are located in the middle column, to expand to fit the remaining space. Therefore, if the table is 148px in width, the side columns will take 24 px each, and the center column will expand to 100px.

I had it set up and working perfectly, until I decided to put content in the middle cells.

I added a PNG image that is 158px in width into the center cell of the center column. It's style says:

width:100%;
max-width:158px;

Therefore, the image should take up the size of the center cell but only up to a max of 158px. This works fine in Firefox, but breaks in IE when less than 158px is available in the center cell. When the overall table size is squished enough that the image should shrink, IE instead keeps the image at the same size, and allows it to be "greedy" and take the space that was previously allocated to the side columns. The side columns are therefore "swallowed up" by the image.

How can I stop the image from being greedy, and forcing it to shrink when not enough space is available instead of eating the side columns?

Here's the code snippet:

<table class="tvin">
	<tr>
		<td class="tvin1" width="24"> </td>
		<td class="tvin2"> </td>
		<td class="tvin3" width="24"> </td>
	</tr>
	<tr>
		<td class="tvin4" width="24"></td>
		<td class="tvin5"><img src="images/soccer.png" alt="Story header 1 Preview" /></td>
		<td class="tvin6" width="24"></td>
	</tr>
	<tr>
		<td class="tvin7" width="24"> </td>
		<td class="tvin8"> </td>
		<td class="tvin9" width="24"> </td>
	</tr>
</table>

... and the CSS styles for IE:

table.tvin td {
	padding:0pt;
	font-size:1px;
}
td.tvin1 {
	background-image:url('../images/tvtl.gif');
	height:11px;
}
td.tvin2 {
	background-image:url('../images/tvt.gif');
}
td.tvin3 {
	background-image:url('../images/tvtr.gif');
}
td.tvin4 {
	background-image:url('../images/tvl.gif');
	width:24px;
}
td.tvin5 {
	background-color:#000000;
}
td.tvin5 img {
	width:100%;
        max-width:158px;
}
td.tvin6 {
	background-image:url('../images/tvr.gif');
}
td.tvin7 {
	background-image:url('../images/tvbl.gif');
	height:9px;
}
td.tvin8 {
	background-image:url('../images/tvb.gif');
}
td.tvin9 {
	background-image:url('../images/tvbr.gif');
}

 

[CreedFeed]

A quick answer : IE doesn't support min-width and max-width. You can include a javscript file which will force IE to recognize it, but it'll only work if users allow javascript (most do I believe). You can get the script here:

http://www.doxdesk.com/software/js/minmax.html

Then in your stylesheet where you define the cell to have a max-width of 158px, you can add the style of "overflow: hidden;" which will cause anything larger than 158px to be cut off. Not sure if that's what you're looking for or not...

 

[Tarh]

Yes I already have that script installed and running. The max-width part wasn't the issue.

Here's an example of my problem displayed visually.

This whole table configuration is to create the image of a television, which has an image displayed inside of it. I can't combine the images together to make one big image because the image that needs to be placed inside the television is generated by a server-side script, therefore it cannot be merged.

The first image is a preview of the table at it's maximum width, at which point it is restricted from going any larger. The second image is the table when it's allocated space has been shortened (800x600 display). The second image was displayed in firefox, and is how it SHOULD react. However, the third image represents what happens in IE when it is compressed.

The image at the bottom represents the table layout:
tvin1 tvin2 tvin3
tvin4 tvin5 tvin6
tvin7 tvin8 tvin9
-----tvstand----

The tv stand isn't part of the problem, so it has been omitted from the codes.