Jon's Blog

.NET Development & More

IE8: Image max-width bug

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;  }

AJAX Control Toolkit: Strange CSS Bug with HTML Editor control and IE 8

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.