cometton

Internet Explorer Is A Punk Bitch

Wouldn’t you agree?

I believe I can speak on behalf of any web developer who has ever tested a web site in IE when I say how problematic and time consuming it can be to render a site correctly. Specifically, I am talking about IE6 and IE7 that cause most of the headaches, although, IE8 is not without its faults too.

Unfortunately, support for these browsers must go on and these beasts of burden need to be tamed if you want your site to be cross browser accessible.

To make my life easier and in affect yours too, I’ve listed all IE specific bugs I have come across as well as the solutions I’ve used to make IE obey. This list is certainly not complete and welcomes any input that would make this list a more definitive source.

Transparency Support in IE6

IE6 doesn’t support alpha-transparency natively, but there are a few workarounds that will enable the browser to have near-native support for alpha-transparency.

24 ways Javascript PNG Support – I highly recommend this fix as it is a sure fire method to force IE6 into behaving more like a modern browser.

<script type="text/javascript" src="supersleight-min.js"></script>

Essentially, this script applies Microsoft’s proprietary filter property to PNG images located in the document. It supports inline and background images as well as background images that are repeated and tiled. There are a few more settings one could configure, but compared to other solutions, this script is the most simple and robust solution available.

:First-Child Pseudo Class in IE6

Introduced in CSS 2, the :first-child class  represents an element that is the first child of some other element. For example, to style the first li element in a ul element with an ID of “list” you would write:

#list li:first-child { margin-left:0 }

Unfortunately, IE6 doesn’t support this class but we can emulate that CSS property using Javascript instead.

document.getElementById("list").getElementsByTagName("li")[0].style.marginLeft="0";

Attach that snippet to an event handler and IE6 will apply the same styling originally expressed in CSS.

Inline-Block in IE6/IE7

The inline-block value for the display property can be quite useful when you need an element to exhibit properties of both an inline and block element.

For example, let’s say you have an h1 element styled with the border-bottom property. Since the h1 is a block element, it inherits the width of the containing area. The problem then becomes apparent because the length of the border is also equal to the width of the containing area. You could style the h1 element with an inline value, but you lose the ability to set a top or bottom margin/padding (Technically, the values can still be set but there will be no visible change in the surrounding content).

Instead, go ahead and set the element with a value of inline-block. This will retain the ability to set a top or bottom margin/padding, like a block element, while the element loses an inherit width, like an inline element. This value is quite handy when elements need to be displayed inline while retaining block like properties.

As useful as this property is, both IE6 and IE7 don’t support the inline-block value which leaves many developers scratching their heads. Javascript won’t solve this problem as there is no inline-block value in Javascript. Never fear though, the solution comes in the form of a browser hack.

Warning – this solution does not validate which is why it’s important to use browser specific stylesheets.

h1 { zoom:1; *display:inline; _height:30px; }

For the inline-block value to work, a hidden property called hasLayout needs to be enabled. In other words, an elements style properties are to be rendered when hasLayout is set to “true”. Setting the zoom property, which is a not a supported standard but rather a Microsoft proprietary property, in conjunction with an inline value triggers the hasLayout property. Notice that the display property uses an asterisk, which is ignored by all other browsers except Internet Explorer. Even though the element has an inline value, the asterisk forces Internet Explorer to apply block properties.

This is all fine and dandy for IE7, but for IE6, a height needs to be added to the element. The underscore is also ignored by all other browsers, even IE7, but finally IE6 properly renders an element exhibiting inline-block properties.