More IE madness: Internet Explorer 7 does not support min-width for tables

Posted by james on Feb. 4, 2010

This is maddening. IE7 "supports" the CSS min-width property. I use quotes, because it truly doesn't. This works:

<style>
div {
width:80%;
min-width:500px;
}
</style>

<div>
This grows with the page, but has a minimum width too.
</div>


That's great, and very useful. But this does not work:

<style>
table {
width:80%;
min-width:500px;
}
</style>

<table>
<tr>
<td>
This is broken.
</td>
</tr>
</table>


So while IE7 supposedly supports the min-width property, it doesn't work in this situation. What a huge pain in the butt. And how completely typical for IE.

This is a quick-fix hack:

<style>
div {
width:80%;
min-width:500px;
}

table {
width:100%;
}
</style>

<div>
<table>
<tr>
<td>
This grows with the page, but has a minimum width too.
</td>
</tr>
</table>
</div>


Since the fix is so simple, you might think this isn't that big a problem. It is. Buggy browsers are always a problem, and cost a *ton* of money. I'm sure it would be completely staggering to calculate the amount of dev hours wasted (and therefore money lost) on working around CSS bugs in IE, and that's not even considering the non-browser that is IE6.