I found a strange IE8 bug dealing with images and the CSS max-width property. I had an image inside of a table cell. The image had a max-width set using CSS. In IE8, if the actual image width was larger than the max-width value then the image was resized properly, but the table cell was not. It was strange because it worked fine in IE7 and Firefox. The way I fixed this issue was to wrap the image inside of a div and then set the width of the div to the same value as the max-width of the image. Oh well, easy enough.
HTML:
<table class="myTable">
<tr>
<td class="col1">
<div class="imageWrapper">
<img src="images/blah.jpg" class="myImage" />
</div>
</td>
<td class="col2">
<p>Content here</p>
</td>
</tr>
</table>
CSS:
table.myTable .col1 { vertical-align: top; width: 122px; }
table.myTable .col2 { vertical-align: top; width: 353px; padding-left: 5px; }
img.myImage { max-width: 122px; max-height: 172px; }
div.imageWrapper { width: 122px; }
Today I was adding the new HTML Editor control (newly added to the AJAX Control Toolkit) to an Intranet page. Whenever I would mouse click into the HTML Editor it would continue to expand. This would only occur in IE 8. When using Firefox or IE 8 in compatibility mode it wouldn't happen. I tracked it down to the following declaration in my CSS file:
.white td
{
padding: 3px;
}
I removed this declaration and instead used the cellpadding attribute for the table. This solved the issue. Very strange.