7 IE Bugs & Hacks
Dec 11 2008
As a web developer, one of the most frustrating things to deal with is cross browser compatibility issues. In the past there were not so many browsers available, but as time goes on, more browsers are released, as well as all of their updated versions that follow.
It actually gets ridiculous sometimes, where does a developer draw the line, and cut their losses? Most commonly found now, are sites being tested in IE6, IE7, Firefox, and Safari.
According to the latest statistics on browser usage, here is the breakdown:
Firefox: 44.2% | IE7: 26.6% | IE6: 20.2% | Chrome: 3.1%b | Safari: 2.7% | Opera: 2.3%
While Firefox is leading the category with 44.2%…IE6 and 7 still account for 46.8%. This means, unfortunately we must find ways to work around the IE bugs.
These tools have proven to be useful when developing for IE:
IE Developer Toolbar (Similar to Firebug)
IE Tab for Firefox (Allows you to render page as IE would, in a new tab)
Multiple Versions of IE (Doesn’t work well with Vista)
Once you have sufficient developer tools, you can begin to debug! Below is a list of 7 annoying IE bugs and hacks, in no particular order. Please keep in mind, all of the live examples should be viewed in IE to see the issues, also please feel free to view the source to see the code in action.
PNG Transparency issues are frustrating because .png allows for higher quality transparencies. Some may suggest to only use .gif files, but there is really no comparison. View the live code example [here] or, for those of you without IE, here are some screen shots:
Firefox
IE 6
There are many fixes to this problem, but one easy one uses JavaScript to handle .png files in IE6. Copy and paste the code below into your <head> and then include your .js file within the same directory, pngfix.js can be downloaded [here]
<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>
Now, check out the example with the JavaScript [here]
Please note that there are many different solutions to the .png problem, this is only one of them. JavaScript is not always the best solution, as we all know it can be turned on/off by the user.
Escape Float problem is strange because it completely distorts the layout between the different browsers. This bug can cause many annoyances, in this particular example it will cause a horizontal scroll bar, the container is only containing the last line of floats, and the floats are running off the right edge. View the live example [here]
Firefox
IE 6 & 7
The problem exists because there is not any stated dimension on the black bordered container. However, giving a set width or height is not always going to work with your layout. Instead, a lovely hack will solve the problem:
/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */
Now, check out the example with the above code implemented [here]
Step Down problem occurs a lot of the time, when you are creating a horizontal menu. In the example, the blocks are floated to the left, so they should all line up. In IE however, they do not. View the live example [here]
Firefox
IE 6 & 7
The problem occurs because the list elements are wrapping the anchor elements. Both are block-level elements, but are not floated. This will cause confusion because block elements naturally have a break after them. This will constantly push the next one down. The solution below solves the problem because it is giving that li a display:inline, which will get rid of that break.
ul#menu li {
display: inline; /* Prevents “stepdown” */
}
Now, check out the example with the above code implemented [here]
Z-index problem appears when you have multiple position:relative elements in your code, IE will set up separate Z layer contexts for each one, which ignore each other. View the live example [here]
Firefox
IE 6 & 7
One quick and dirty solution offered requires a bit of JavaScript, which can be downloaded [here]
Now, check out the example with the JavaScript implemented [here]
Double Margins occur when an element is floated to one side or another, and then given a margin for that same side. So, if an element is float:left and it also has margin-left:10px then the margin will actually be 20px. View the live example [here]
Firefox
IE 6 & 7
The solution to this problem is pretty simple, all you have to do is apply display:inline to your floated element.
Now, check out the example with the above code implemented [here]
Min-height is a problem that I am sure everyone has come across one time or another. Unfortunately IE does not display this correctly. View the live example [here]
Firefox
IE 6
The solution to this problem is pretty simple, all you have to do is apply
height:auto !important;
height:500px;
to the div with min-height.
Now, check out the example with the above code implemented [here]
Form Elements have issues when certain form input elements whose containing box inherits the sum of the margins of all of their containing boxes. The form element actually inherits the the sum of the left margins of all of its ancestors. This bug does not involve floats. View the live example [here]
Firefox
IE 6 & 7
There are a few solutions to the problem, one is to set a negative margin on the input element equal to the sum of all of its parents’ margins. Another would be to remove all margins from the ancestor elements. The solution provided in the sample code is one where we a) put a label, or another inline element immediately before the input -or- b) wrap the input element in an un styled span, label, or any container element without a hasLayout style.
Now, check out the example with the above solutions implemented, and view the source to see how it works. [here]
Posted by Amanda at 12:50 PM
Published in Development, Tips & Tricks, eROI on Thursday, December 11th, 2008
December 11th, 2008 at 2:01 pm
Ouch. I can’t believe that IE 6 and 7 users still make up 46.8%!
December 11th, 2008 at 2:40 pm
Great post! It would be a dream come true for IE6 to die…sigh.
December 11th, 2008 at 7:09 pm
Excellent post! A way I use to solve some of the cross browser compatibility issues is the Css Reset technique as coded by Eric Meyer or Yahoo (YUI).
December 12th, 2008 at 2:06 am
Wow – I learned a ton from this post. Not sure I will ever use what I learned as I don’t code, but really good to be aware of all of this.
December 12th, 2008 at 10:53 am
Thanks Alex!
You are right, the css reset technique is useful when coding for IE. [This page] is a great resource from Eric Meyer