IE Issues to Avoid

As many of you know, Mint.com has just come out of beta with our new release (v8). During this last development cycle we revamped our transaction page to have an inline edit, instead of using div-based popup dialogs. This has been my baby for the past two months, and was a lot of work. During the design and development process most browsers behaved very well, but IE really gave me some problems. Today, I want to discuss those issues, so that you can avoid them in your own projects.

Opacity Crop:


If you have an element in the DOM with children element(s) positioned outside of the parent&rsquot;s dimensions, say with "position:relative" or using margins, and then apply an opacity to the parent element, IE will crop all elements positioned outside of the parent. This happens because IE uses a special Microsoft filter to render the opacity, which redraws the parent element and its children to the right opacity, but only considers the dimensions inside the parent element for this redraw. Thus, everything positioned outside of the parents dimensions are lost.

Image 1: Normal Popup

before opacity is applied

Image 2: Cropped Popup

after opacity is applied

Opacity Breaks Background Alpha Opacity:


In addition to the above issue, applying an opacity in IE also breaks any alpha transparency background images use by any element inheriting from the element where the opacity is applied. In Image 1, you see the nice alpha transparency background used in the popup footer to apply a shadow. Then in Image 2, after opacity has been applied, you see that alpha transparency is now black.

The way to prevent both these issue is to not apply an opacity to any ancestor of an element positioned outside of the ancestor and/or with a background alpha transparency. This includes animations that use opacity, because once the opacity is applied, the cropping cannot be removed. Even setting the opacity back to 100 will not restore the original settings, because it still uses the Microsoft opacity filter.

Percentage Width on Inputs:


The last issue I ran into was with input elements inside of a table. On Mint we use a background image, on a table cell in the edit row to provide the look and feel for the input, while the actual input element is transparent with a 95% width. This works great in all browser, except in IE when the length of the value in the input is greater than the 95% width. In that case, the input and TD tags resize to fit the text. The solution is to use fixed width for IE, because IE resizes elements width percentage width, if the content is larger than the width.

Here is a test page so you can experience these lovely IE issues for yourself.