Fix table-cell and max-width bug in IE8

I find I like documenting IE bug fixes that I come across in my daily work. It is just as much for myself to go back to as it is for you the reader.

Well the other day I came across a real puzzling bug. Lets describe the circumstance first:

The Cause

Lets say you have a table that lists of bunch of suppliers that a company has. It includes an image and the company name.

Something like the following:

<table id="suppliers">
    <tr>
    	<td><img src="images/suppliers/airflex.jpg" alt="" /></td>
        <td><img src="images/suppliers/wallace.jpg" alt="" /></td>
        <td><img src="images/suppliers/lunde.jpg" alt="" /></td>
        <td><img src="images/suppliers/hutchens.jpg" alt="" /></td>
    </tr>
    <tr>
    	<td>Airflex</td>
        <td>Wallace Forge Company</td>
        <td>Lunde Lift Systems</td>
        <td>Hutchens Industries</td>
    </tr>
</table>

Now let’s say that each image is a different size… and you want to control this. You use the following CSS rule:

table#suppliers img {
	max-height: 107px;
	max-width: 159px;
}

This now keeps the height and width reasonable. Now if you look in Firefox it looks great… IE8 has its table stretch out to the sides…. and IE7 looks perfect.

This had me stumped… why does IE8 show worse than IE7. It made no sense. Below is the solution I found.

The Solution

The simple solution is to specify a direct width for the table, as well as set the table-layout to fixed:

table#suppliers {
	table-layout: fixed;
	width: 726px;
}

Happy Bug Fixing!

Find Out More Over at Bytes.com

Related posts:

1. Firebug 1.5 Inspector Stuck (FireQuery Fix)
2. CSS Line Break Bug (screencast)
3. Squish the Internet Explorer Z-Index Bug
4. How-To MySQL Table Joins
5. Dynamically Change Width and Height in HTML Markup

Written by brenelz

Hello everyone, I'm Brenley Dueck or better known as Brenelz. I currently run my own business called Brenelz Web Solutions which focuses primary on winnipeg website design. The web technologies I most specialize in are CSS, jQuery, AJAX, PHP, and the MySQL database. Please make sure to follow me on twitter.