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

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.

12 Responses to “Fix table-cell and max-width bug in IE8”

Joseph McCullough Says:
February 9th, 2010 at 1:55 am
Heya. Thanks for sharing your solution. I wouldn’t necessarily call this a bug though. I would say IE8 in this instance is just a bit more meticulous about what information you provide. Some browsers just need more information than others. Thanks again!
Chawl Says:
February 19th, 2010 at 10:07 am
Not a bug really? How about a fluid width table-cell then? May be you can write cryptic JS codes to “inform” ie8 that parent should resize to fit its inner contents. May be we can render all page with JS and “inform” ie8 just to show it. Bribed by MS or smt?
Joseph McCullough Says:
March 4th, 2010 at 1:22 am
I was simply saying for a lot of scenarios people label bugs and create hacks for, it just takes a simple extra bit of information for the browser to render it perfectly.
Consalteam Says:
May 9th, 2010 at 1:31 pm
I try solution, but it my table it didnt work
I have tables inside table, maybe that is reason why this hack doesnt work for me.
John Says:
July 21st, 2010 at 9:37 am
Nice post, fixes just the problem I was having with IE ignoring the width I was supplying for the table cell. Thanks for sharing.
Prasad Says:
September 12th, 2010 at 10:43 pm
Perfect Fix .
Thanx
Evyatar Says:
October 18th, 2010 at 8:04 am
Great post.
I have searched a lot for a fix to this bug.
Thanks.
need sleep Says:
December 3rd, 2010 at 6:47 am
Thank you so much!! I’ve tried everything and this works great!
Brett Says:
February 20th, 2011 at 5:34 am
Many thanks. That helped me out a lot!
Babwoule Says:
August 22nd, 2011 at 3:05 am
Thanks, works great!
Roman Says:
September 28th, 2011 at 7:25 am
Thank you for the solution! It works great.
It was a big surprise that IE8 has so king of bug.
nixusr Says:
November 9th, 2011 at 8:51 pm
THANK YOU and the internet for this fix! I was googling this issue and found your site on my 1st round of searches. Your write up described my issue to a Tee! Popped in your suggested fix and whalah..cussing out IE8 stopped for the moment. Thanks again.