Bedrich Rios

I know, the script is not here anymore, but don’t panic! You can find this and other great tutorials over at nettuts.com.

Since 2001, IE6 has been a nightmare for all web designers and more recently IE7 is taking that spot. Although, as of last October, more people were recorded using Firefox to surf the web, the market share of the Internet Explorer family is still bigger than Mozilla’s browser and far greater than Apple’s Safari.

The Box Model Problem

This is the most widely known, and hated bug in IE6. In a few words, unlike Firefox (or other standards compliant browsers), IE6 disregards an element’s specified width and/or height for its content and adds padding, margin, and border to it. This means that in Firefox an item with a width of 200px and a padding of 10px equals 220px in width. The padding is added to the the element after the the content area’s width is determined by the CSS rules. On the other hand, IE6 will render an element with a total 0f 200px. This happens because the padding is included in the content area’s width of the element.

A few solutions

* html: There is a huge debate about this method within Web Designing circle. People claim this is a hack, and well I think it is. Nevertheless, it is one of the much “cleaner” hacks (if used sparingly) and I personally use it from time to time. All you have to do in order to use this hack is add * html before any of your CSS rules. This will make the rule only be applied to IE6 and no other browser.

JavaScript: This method is also a very clean one. How does it work? I think that is a topic for another post (leave a comment if you wish me to write about it). But in a few words, it uses JavaScript to detect which browser a person may be using and inserts a given piece of CSS to that specific browser. The downside to this method is that it requires JavaScript to be enable in your browser, something that is not always true.

Conditional Comments: Yet another way to deal with IE6, and send this browser specific rules. The only downside to this method is that it messes with the mark-up of your web page. All you have to is add the following to your source: <!–[if IE 6]>And add specific mark-up, stylesheets, or JavaScript toIE6 <![endif]–>.

Final Thoughts

When dealing with IE6, no method is perfect. And for the most part, even if you don’t, somebody is going to consider your method of choice a hack. I personally think that anything you do, as long as you do it sparingly and with reasoning, is fair play. Let me know if you want any tutorials or post to appear on my blog by leaving a comment.