Mashupdesign Blog : Web Design, Coding, and UI/UX

IE bugs fixes

Do you hate IE? I do but IE8 is an exception so far it’s still not up to what Mozilla or Safari.

However, this is really awesome tip we all can try if we run into IE troble.

Position Relative and Overflow Hidden

It happens when the parent element overflow set to hidden and the child element is set to position:relative.

Add position relative to the parent element.

Min-Height for IE

It’s simple, IE ignores min-height properties and you can use the following hack to fix it.

This solution works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

selector { min-height:500px; height:auto !important; height:500px; }

Bicubic Image Scaling

IE image scaling is horrible so we use this generic IE code in our stylesheet.

img { -ms-interpolation-mode: bicubic; }


PNG Transparency

I am not sure if this is going to work as I normally using unitpng.js

img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(…); }

Disabled IE default Vertical Scroll bar

By default, IE displays vertical scrollbar even though the content fit nicely in the window. You can use overflow:auto to show it only when you need

html { overflow: auto; }

IFrame Transparent Background

In firefox and safari you shouldn’t encounter this problem because by default, the iframe background is set to transparent, but in IE, it doesn’t. You need to use allowTransparency attribute and put the following CSS code to achieve that.

/* in the iframe element */ <br /> <iframe src="content.html" allowtransparency="allowtransparency"></iframe></p> <p>/* in the iframe docuement, in this case content.html */ <br /> body { background-color:transparent; }

:hover Pseudo Class

IE only supports :hover pseudo class for anchor element. You can achieve the same effect using jQuery hover event.

/* jQuery Script */<br /> $(&#8216;#list li&#8217;).hover(</p> <p> function () {<br /> $(this).addClass(&#8216;color&#8217;);<br /> },</p> <p> function() {<br /> $(this).removeClass(&#8216;color&#8217;);<br /> }<br /> );</p> <p>/* CSS Style */<br /> .color {<br /> background-color:#f00;<br /> }</p> <p>/* HTML */</p> <ul id="list"> <li>Item 1</li> <p></p> <li>Item 2</li> <p></p> <li>Item 3</li> <p> </ul> <p>

I haven’t try this fixed yet however, it’s promising. Note for future reference.